いくつかのオプションを含むドロップダウンリストがあり、各オプションには名前属性があります。オプションを選択すると、別のチェックボックスのリストを表示する必要があります。別のオプションを選択すると、そのチェックボックスリストが消えて別のリストが表示されます。
これらのチェックボックスリストを作成し、選択したオプションの名前属性に関連する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>
あなたのcode this
では、選択されたオプションではなくselect要素を参照します
選択したオプションを参照するには、これを行うことができます-
$(this).find('option:selected').attr("name");
私のようにこれに出くわした人のために。
他の人が述べたように、nameはoption要素の有効な属性ではありません。上記の受け入れられた回答と この他の質問からの回答 を組み合わせると、次のようになります。
$(this).find('option:selected').text();
まず、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イベントを発生させたselect
のコンテキスト内のoption:selected
セレクターに注意してください。
$(this).attr("name")
オプション名ではなく、選択タグの名前を意味します。
オプション名を取得するには
$("#band_type_choices option:selected").attr('name');
コードは非常にシンプルなので、このコードを入れましょう
_var name = $("#band_type_choices option:selected").text();
_
ここでは$(this).find().text()
を使用したくありません。直接ID名を入力し、text()
とともに_option:selected
_を追加できます。
これは結果オプション名を返します。より良いこれを試してみてください...
選択オプションで名前を使用することは無効です。
他の人はdata-属性を提案しました、代替はルックアップテーブルです
ここでは、「これ」は選択を指すので、オプションを「見つける」必要はありません。
var names = ["", "acoustic", "jazz", "acoustic_jazz", "party", "acoustic_party", "jazz_party", "acoustic_jazz_party"];
$(function() {
$('#band_type_choices').on('change', function() {
$('.checkboxlist').hide();
var idx = this.selectedIndex;
if (idx > 0) $('#checkboxlist_' + names[idx]).show();
});
});
.checkboxlist { display:none }
Choose acoustic to see the corresponding div
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<div class="checkboxlist" id="checkboxlist_acoustic">
<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>