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

这是我的下拉列表，如果我选择2.0，那么文本应该更改为“Android 2.0”，我可以使用该值显示文本。但我需要知道如何在onclick（即展开下拉列表）时将值重置回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>

选择选项
安卓
2
3
苹果手机
2
3
4

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

---

2.0

[更新]

给你

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

---

这仍然可以优化。

+1我们有同样的想法，但我认为它可以进一步优化什么在IE浏览器中不起作用？请发布您正在使用的代码。您好CME64，感谢您的编码，我仍然需要单击选择框的原始值（即在展开模式下，我需要原始值）例如：如果我在iphone下选择3.0，则显示应为“iphone 3.0”，如果我单击选择框，则在展开模式下，文本应返回到3.0。不客气，这也是可以做到的，我认为这种方法更容易处理，您仍然可以使用相同的方法，而不是在单击时读取值，而是读取所选选项的属性“orig”，其中包含原始值确定我误解了您，在mousedown事件$（this）.children（'option'）.each（function（）{$（this）中添加此行.html（$（this.attr（'orig'））；}）；您还可以在修改代码后强制触发blur event中的“change”事件，它在除IE浏览器之外的所有浏览器中都可以正常工作。让我知道如何在IE浏览器中工作

$('[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+')'));
});

$('[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'));
    });
});