基于Javascript中选定的选项值显示/隐藏div

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

这是我的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>

10400000
10401000

要显示或隐藏的div：

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

hi
你好

---

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

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

试试这个JS：

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

---

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

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

---

只有当选项没有值时，选项文本才会用作selects值，要获取所选值，您只需在select处理程序中使用此值。

在div标记中将类替换为id。您好，谢谢。对不起，我现在因为没睡而快要崩溃了。我不小心将类交换到了ID等等。将在9分钟后接受此答案