[javascript] どのようにjQueryを使って選択ボックスに最初のオプションを設定するのですか?


Answers

select要素を最初の位置にリセットしたい場合は、最も簡単な方法は次のようになります。

$('#name2').val('');

ドキュメント内のすべての選択要素をリセットするには:

$('select').val('')

編集:以下のコメントに従って明確にするために、これは選択要素を最初の空白の項目にリセットし、空の項目がリストに存在する場合にのみリセットされます。

Question

私は2つのHTML selectボックスを持っていselect 。 私は別のボックスでselectをするときに1つのselectボックスをリセットする必要がありselect

<select id="name" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

私が最初のselect (すなわちid="name" )のオプションを選択すると、 select allselect all selectために2番目のselectをリセットする必要がありselect all 。 同様に、2番目の選択肢のオプション( id="name2" )をselect all selectと、最初のselectをリセットしてselect allselect all必要がありselect all

どうやってやるの?




私はjQuery v1.9.1の@Jens Rolandの答えでdefaultSelectedプロパティを使用して問題が発生しました。 より一般的な方法(多数の従属選択を伴う)は、従属選択にデータデフォルト属性を置き、再設定時にそれらを反復することです。

<select id="name0" >
    <option value="">reset</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name1" class="name" data-default="1">
    <option value="">select all</option>
    <option value="1" selected="true">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" class="name" data-default="2">
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2" selected="true">Text 2</option>
    <option value="3">Text 3</option>
</select>

そして、javascript ...

$('#name0').change(function(){
    if($('#name0').val() == '') {
        $('select.name').each(function(index){
          $(this).val($(this).data('default'))  
        })
    } else {
      $('select.name').val($('#name0').val() );
    }
});

上記の動作バージョンについては、 http://jsfiddle.net/8hvqN/を参照してください。




ここでは、私が使用している最高のソリューションです。 これは1以上のslectboxに適用されます

$("select").change(function(){
    var thisval = $(this).val();
    $("select").prop('selectedIndex',0);
    $(this).val(thisval);
})




これはまた使用することができます

$('#name2').change(function(){
    $('#name').val('');//You can set the first value of first one if that is not empty
});


$('#name').change(function(){
    $('#name2').val('');
});



ここでは、あなたが最初のオプション、例えば「オプションを選択」、「Select_id_wrap」は選択肢の周りのdivですが、その場合はそのことを明確にしたいと思っているだけですこれがどのように作用するかについて 鉱山はクリック機能にリセットされますが、私は変更の中でもうまくいくと確信しています...

$("#select_id_wrap").find("select option").prop("selected", false);



「選択」属性を持つオプションに選択項目をリセットする場合は、これを使用します。 選択にform.reset()inbuilt javascript関数に似て動作します。

 $("#name").val($("#name option[selected]").val());



デフォルト値として定義されているランダムなオプション要素を使用して処理する方法を示します(この場合、テキスト2がデフォルトです)。

<select id="name2" >
   <option value="">select all</option>
   <option value="1">Text 1</option>
   <option value="2" selected="selected">Text 2</option>
   <option value="3">Text 3</option>
</select>
<script>
    $('#name2 option[selected]').prop('selected', true);
</script>



選択するためにonchangeイベントをバインドするためにjqueryを使用しますが、別の$(this) jqueryオブジェクトを作成する必要はありません。

$('select[name=name2]').change(function(){
    if (this.value) {
        console.log('option value = ', this.value);
        console.log('option text  = ', this.options[this.selectedIndex].text);

        // Reset selected
        this.selectedIndex = this.defaultSelected;
    }
});



Links