如何在动态运行时选择下拉列表

my html code.

<input type="button" onClick="show($row['empDesignation']?>');" value="update"/>

so when i click on update button m passing the value to javascript

 <script type="text/javascript">
   function show(desig){
    document.getElementById("designation").value=desig;
    }
    </script>

so i want the value which is passed to javacript to be listed first in the dropdown list

php code

<select id="designation" name="designation"> 
     <? while($role=mysql_fetch_array($sql_role)){    ?>
         <option value="<?=$role['id']?>"><?=$role['id']?></option>
    <? } ?></select>

<option value="<?php echo $role['id']?>"><?php echo  $role['id']?></option>

You can do that like following algorithm;

Get your entire select options and put it in to array Remove all options from selectbox Put first option that you get from show function Fill rest of the item from array to selectbox.

You can see an example below;

  function show(desig) {
    var arr = [];
    var list = document.getElementById("designation");
    for (var i = 0; i < list.options.length; i++) {
    arr.push(list.options[i]);
    } 

    // Delete all options from selectbox
    list.options.length = 0;

    // create first option
    var opt = document.createElement('option');
    opt.innerHTML = desig;
    opt.value = desig;
    list.appendChild(opt);


    for (var j in arr) {
    if (arr[j].value !== desig) {
    var opt = document.createElement('option');
    opt.innerHTML = arr[j].text;
    opt.value = arr[j].value;
    list.appendChild(opt);
    }
    }
}

You can see working demo here: http://jsfiddle.net/rZmgY/1/