32

いくつかのオプションを含むドロップダウン リストがあり、各オプションには name 属性があります。オプションを選択すると、チェックボックスの別のリストが表示される必要があります。別のオプションが選択されると、そのチェックボックスのリストが消えて、別のチェックボックスが表示されます。

これらのチェックボックス リストを作成し、選択したオプションの name 属性に対応する ID を与えました。次のコードを使用して正しいチェックボックスリストを表示しようとしています

$(document).ready(function(){

       $('#band_type_choices').on('change', function() {         
    $('.checkboxlist').hide();
    $('#checkboxlist_' + $(this).attr("name") ).css("display", "block");

});

しかし、何も起こっていません。

ここに私のドロップダウンオプションがあります:

<select id="band_type_choices">
    <option vlaue="0"></option>
    <option value="100" name="acoustic">Acoustic</option>
    <option value="0" name="jazz">Jazz/Easy Listening</option>
    <option value="0" name="acoustic_jazz">Acoustic + Jazz/Easy Listening</option>
    <option value="0" name="party">Party</option>
    <option value="0" name="acoustic_party">Acoustic + Party</option>
    <option value="0" name="jazz_party">Jazz/Easy Listening + Party</option>
    <option value="0" name="acoustic_jazz_party">Acoustic + Jazz/Easy Listening + Party</option>
 </select>

リストの1つの例：

<div class="checkboxlist" id="checkboxlist_acoustic" style="display:none;">
<input type="checkbox" class="checkbox keys" name="keys" value="100" />Keys<br>
<input type="checkbox" class="checkbox acou_guit" name="acou_guit" value="100" />Acoustic Guitar<br>
<input type="checkbox" class="checkbox drums" name="drums" value="100" />Drums<br>
<input type="checkbox" class="checkbox alt_sax" name="alt_sax" value="100" />Alto Sax<br>
<input type="checkbox" class="checkbox ten_sax" name="ten_sax" value="100" />Tenor Sax<br>
<input type="checkbox" class="checkbox clarinet" name="clarinet" value="100" />Clarinet<br>
<input type="checkbox" class="checkbox trombone" name="trombone" value="100" />Trombone<br>
<input type="checkbox" class="checkbox trumpet" name="trumpet" value="100" />Trumpet<br>
<input type="checkbox" class="checkbox flute" name="flute" value="100" />Flute<br>
<input type="checkbox" class="checkbox cello" name="cello" value="100" />Cello<br>
<input type="checkbox" class="checkbox violin" name="violin" value="100" />Violin<br>
</div>
4

6 に答える 6

63

For anyone who comes across this late, like me.

As others have stated, name isn't a valid attribute of an option element. Combining the accepted answer above with the answer from this other question, you get:

$(this).find('option:selected').text();
于 2014-06-16T19:37:50.803 に答える
49

あなたのコードthisでは、選択されたオプションではなく選択要素を参照しています

選択したオプションを参照するには、これを行うことができます -

$(this).find('option:selected').attr("name");
于 2013-09-09T12:11:07.733 に答える
5

まず、要素nameの有効な属性ではありません。option代わりに、次dataのようにパラメーターを使用できます。

<option value="foo" data-name="bar">Foo Bar</option>

あなたが抱えている主な問題は、JSが選択されたオプションではなく、要素のname属性を見ていることです。selectこれを試して：

$('#band_type_choices').on('change', function() {         
    $('.checkboxlist').hide();
    $('#checkboxlist_' + $('option:selected', this).data("name")).css("display", "block");
});

change イベントを発生させoption:selectedたコンテキスト内のセレクターに注意してください。select

于 2013-09-09T12:09:14.793 に答える
4 
 $(this).attr("name")

オプション名ではなく、選択タグの名前を意味します。

オプション名を取得するには

 $("#band_type_choices option:selected").attr('name');
于 2013-09-09T12:10:56.490 に答える