32

我有一个包含多个选项的下拉列表，每个选项都有一个名称属性。When I select an option, a different list of checkboxes needs to appear - when another options is selected, that checkbox list should disappear and another one be displayed.

我创建了这些复选框列表，并为它们提供了一个与所选选项的名称属性相关的 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>

以及其中一个列表的示例：

<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

对于像我这样迟到的人。

正如其他人所说，名称不是选项元素的有效属性。将上面接受的答案与其他问题的答案结合起来，您会得到：

$(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 回答
7

代码很简单，让我们把这段代码

var name = $("#band_type_choices  option:selected").text();

这里你不想用$(this).find().text()，​​直接把你的id名字加 进去就option:selected可以了text()。

这将返回结果选项名称。最好试试这个...

于 2019-06-26T06:53:56.490 回答
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");
});

请注意引发更改事件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 回答
1

在选择选项上使用名称无效。

其他人建议使用 data- 属性，另一种方法是查找表

这里的“this”指的是选择所以不需要“find”选项

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>

于 2013-09-09T12:13:49.477 回答