reload a select list on button click not reloading the whole page

[Susmita swasti]

i just want to refresh a select list on button click .Dont want to reload the page.

[Anas Mosaad]

Any introductory AJAX tutorial will tell you how to do that. If you have any issues I can help. What is the problem you are currently facing?

[Susmita swasti]

Actually I have 2 <select> tag.
i.e.

<select id="id1"  multiple class="chznselect"  >
  <option value="volvo"  >Volvo</option>
  <option value="saab" >Saab</option>
</select>
<select id="id2"  multiple class="chznselect"  onchange="">
  <option value="opel"  >Opel</option>
  <option value="audi">Audi</option>
</select>

my requirement is dat if I am selecting "volvo" value from 1st drop down box then 2nd drop down box will get refreshed with "audi" value selected by default.i.e. we have to dynamically assign Selected="Selected" for <option value="opel" >Opel</option>..
plz help me ....u can use jQuery or Ajax ..

[Anas Mosaad]

It seems to me that you don't need to interact with the server. You have everything on your page. You just need the mapping logic in your JS.

Simply, onchange of the first list, check the value and select the equivalent option of the second select list - For example, to select opel using JQuery:

$("#id1").change(function() {
    $("#id1 option:selected").each(function () {
        alert("volvo" == $(this).val());
           if("volvo" == $(this).val()) 
             $('#id2 option[value="opel"]').attr("selected", true);
       })
});
 

[Susmita swasti]

oopsss i tried ur code. but its not working...
can u suggest me any other way..

the code u hv provided change the attribute value but the second select list is not gettting refreshed..

[Anas Mosaad]

What do u actually mean by getting refreshed. You need to deselect all?
This snippet clear all selection:

$("#id2 option:selected").each(function(){
  $(this).removeAttr("selected");
});