javascript - 选择框展开时如何修改下拉文本onchange事件和onclick应该具有原始值

Question

这是我的下拉菜单，如果我选择 2.0，则文本应更改为“Android 2.0”，我可以使用该值显示文本。但我需要知道如何在点击时将值重置为 2.0（即在展开下拉列表时）。这在 IE 浏览器中不起作用。

<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>

Answer 1

将名称与值一起存储为数据属性，以便您可以在它们之间来回切换：

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

Answer 2

[更新]

干得好

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

js：

$('[name="androidSelect"]').change(function(){
    var i = $(this)[0].selectedIndex ; 
    console.log(i);
    var x = $(this).val();
    $(this).children('option').each(function(){
        $(this).html($(this).attr('orig'));
    });
    $(this).children('option:eq('+i+')').html(x);
    console.log($(this).children(':eq('+i+')'));
});

演示

[更新] ：

js：

$('[name="androidSelect"]').change(function(){
    var i = $(this)[0].selectedIndex ; 
    console.log(i);
    var x = $(this).val();
    $(this).children('option').each(function(){
        $(this).html($(this).attr('orig'));
    });
    $(this).children('option:eq('+i+')').html(x);
    console.log($(this).children(':eq('+i+')'));
}).mousedown(function(){
    $(this).children('option').each(function(){
        $(this).html($(this).attr('orig'));
    });
});

演示

这仍然可以优化..