Question

我想根据初始选择值的类显示div id。理想情况下，最初将隐藏所有div，并且仅显示ID与选择下拉列表类别匹配的div。因此，下面的选择A或D都将显示div ID a。

我目前的代码如下：`

<select name="milestone_tag" id="milestone_tag"
  <option value="1" class="a">Selection A
  <option value="2" class="b">Selection B</option>
  <option value="3" class="a-b">Selection C</option>
  <option value="4" class="a">Selection D</option>
</select>
<div id="a">
  <input name="milestone_a" />
</div>
<div id="b">
  <input name="milestone_b" />
<div id="a-b">
  <input name="milestone_a" />
  <input name="milestone_b" />
</div>

$('#milestone_tag').change(function() {
$("#a,#b,#a-b").hide();
$($(this).find('option:selected').attr('class')).show();
});

非常感谢任何帮助！

Answer 1

你忘记了选择器前面的＃。将您的jQuery代码置于

中的好习惯

$(document).ready

   $(document).ready(function () {
        $("#a,#b,#a-b").hide();
        $('#milestone_tag').change(function() {
              $("#a,#b,#a-b").hide();
              var a = "#"+$(this).find('option:selected').attr('class');
              $(a).show();
         });
   });

jSFiddle

Answer 2

您只需传递option的类名，您需要在其前面加上选择器类型。在这种情况下，div的id

你基本上是这样做的 $('a').show();当需要$('#a').show();

时

$('#' + $(this).find('option:selected').attr('class')).show();

Answer 3

你需要添加选择器让jQuery知道你希望它是class或id，因为.attr()不添加选择器，只有属性的值：

$('.' + $(this).find('option:selected').attr('class')).show();

id：

$('#' + $(this).find('option:selected').attr('id')).show();

希望这有帮助。

Answer 4

类选择器看起来像.class而.attr()返回class而没有.。因此，这一行：

$($(this).find('option:selected').attr('class')).show();

必须像这样才能发挥作用：

$("." + $(this).find('option:selected').attr('class')).show();

Answer 5

我会尝试以下方式：

<select name="milestone_tag" id="milestone_tag">
    <option value="1" class="a">Selection A</option>
    <option value="2" class="b">Selection B</option>
    <option value="3" class="a-b">Selection C</option>
    <option value="4" class="a">Selection D</option>
</select>
<div id="a" class="milestone">
    <input name="milestone_a" value="milestone a" />
</div>
<div id="b" class="milestone">
    <input name="milestone_b" value="milestone b" />
</div>
<div id="a-b" class="milestone">
    <input name="milestone_a" value="milestone a" />
    <input name="milestone_b" value="milestone b" />
</div>

$(document).ready(function(){
    var $milestones = $(".milestone"),
        $selector = $('#milestone_tag');

    $selector.change(function() {
        var selected = $selector.find('option:selected').attr('class');

        $milestones.hide();
        $('#' + selected + '.milestone').show();
    });
});

http://jsfiddle.net/userdude/ScWVZ/1/

稍微复杂一点的示例，首先使用相关的id选择器测试并创建本地数据值，以逗号分隔，然后用于显示相关元素。请注意使用（不存在的）c，而a和b对a-b案例不重复。

http://jsfiddle.net/userdude/ScWVZ/3/

根据jquery中的选择值显示表单字段

5 个答案: