Question

I have 2 dropdown list, where in the first dropdown list i have some data and if I select the data it has to be stored into the second dropdown list. Here is the code :-

This is the first dropdown list,

<select name="weekId" id="weekId" onchange="getSelected(value)">
   <option value="Select">Select</option>
   <option value="Weekly">Weekly</option>
   <option value="Monthly">Monthly</option>
   <option value="Both">Both</option>
</select>

This is the second list,

<select id="selectedWeek" name="selectedWeek" size="5" multiple="multiple">

If I select Weekly in the first dropdown, the value has to get stored in the second dropdown. How do I go about implementing this?

Thanks in advance!!

Answer 1

var weekId = document.getElementById('weekId')
  , selectedWeek = document.getElementById('selectedWeek')
  , option;

weekId.onchange = function() { 
  option = document.createElement('option');
  option.value = this.value;
  option.text = this.options[this.selectedIndex].text;
  selectedWeek.appendChild(option);
  weekId.removeChild(this.options[this.selectedIndex]);  
};​

see working fiddle here: http://jsfiddle.net/bKrFK/1/

the last line in the event-handler will remove the selected option from the weekId select-box (remove that line if not needed)