0

ここに私が持っているドロップダウンがあります.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>
4

2 に答える 2

2

名前を値とともにデータ属性として保存して、それらを切り替えることができるようにします。

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

于 2013-06-17T06:56:26.777 に答える
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:

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

デモ

これはまだ最適化できます..

于 2013-06-17T08:16:24.293 に答える