how to change the drop-down text on the change event and toggle when the selection box expands should have an original value

advertisements

Here is the dropdown i have, if i select 2.0 then the text should be changed to "Android 2.0", I can display the text using the value. But i need to know how to reset the value back to 2.0 when onclick ( ie on expanding the dropdown). This does not work in IE browsers.

<div id="select_id">
   <select name="androidSelect" >
     <option value="">Select Option</option>
     <option value="Android">Android</option>
     <option value="Android 2.0">2.0</option>
     <option value="Android 3.0">3.0</option>
     <option value="IPhone">IPhone</option>
     <option value=" IPhone 2.0">2.0</option>
     <option value=" IPhone 3.0">3.0</option>
     <option value=" IPhone 4.0">4.0</option>
   </select>
</div>


Store the name as a data attribute along with the value so you can switch back and forth between them:

<option value="Android 2.0" data-name="2.0">2.0</option>