Question

我想知道它为什么不起作用。

这是我的JS：

$("#cat-code").change(function(){
  var value = $("#cat-code option:selected").val();
  if (value == "10400000"){
    $("#div1").show();
    $("#div2").hide();
  }
});

选择标记：

<select class="cat-code" id="cat-code" name="project_procurement_management_plan[items_attributes][0][category_id]">
  <option value="1">10400000</option>
  <option value="2">10401000</option>
</select>

要显示或隐藏的分区：

<div class="div1">hi</div>
<div class="div2">hello</div>

任何变通办法都将受到赞赏。感谢。

Answer 1

看起来你的JS是带有ID的DOM对象的引用，但你的HTML有类。

尝试使用此JS：

$(".div1").show();
$(".div2").hide();

Answer 2

您已经将值专门设置为1和2，因此可能就是这样：

$("#cat-code").change(function(){
  var value = this.value;
  if (value == "1"){
    $(".div1").show();
    $(".div2").hide();
  }
});

FIDDLE

如果选项没有值，则选项文本将仅用作选择值，并且在select的处理程序内获取所需的所有值this.value。

根据Javascript中选定的选项值显示/隐藏div

2 个答案: