Javascript 使用jQuery检查html select的值

我有以下

选择

框：

<select id="choose">
  <option value=1>A</option>
  <option value=2>B</option>
  <option value=3>C</option>
</select>

<div id="hide-me">hide me!</div>

A.
B
C
把我藏起来！

选择选项“B”时如何隐藏元素？我试过这个：

<script type="text/javascript">
  if ("#chose option:selected").val(2) {
    $("#hide-me").hide();
  };
</script>

如果（“#选择选项：已选择”）.val（2）{
$（“#隐藏我”）.hide（）；
};

---

我想我很接近了，但当我选择“B”选项时，什么也没发生。有人有什么建议吗？

听

#选择
元素的
change
事件，并在那里添加条件逻辑


…等效，但可能可读性较差的版本：


作为旁注，所选选项的
值
是一个字符串

如果需要，还可以将其转换为数字：

if (parseInt(this.value, 10) === 2) { ... }

或者你也可以：（虽然不建议。这可能会导致逻辑错误。）


没有jQuery：

收听
元素的
更改
事件#选择
元素，并在其中添加条件逻辑


…等效，但可能可读性较差的版本：


作为旁注，所选选项的
值
是一个字符串

如果需要，还可以将其转换为数字：

if (parseInt(this.value, 10) === 2) { ... }

或者你也可以：（虽然不建议。这可能会导致逻辑错误。）


没有jQuery：

您需要附加更改事件以选择元素来检测选项更改。然后使用参数值不等于2的
.toggle（）
进行显示/隐藏决策：

$('#choose').change(function(){
   $("#hide-me").toggle($(this).val() != "2");
})

您需要附加更改事件来选择元素以检测选项更改。然后使用参数值不等于2的
.toggle（）
进行显示/隐藏决策：

$('#choose').change(function(){
   $("#hide-me").toggle($(this).val() != "2");
})

代码的问题在于：

它在语法上不正确-
（“#选择选项：已选择”）。val（2）
是一个表达式，反过来应将其括在括号中，作为
if
的适当条件，如下所示：

if（（“#选择选项：已选择”）.val（2））{

但是，即使在这之后，您的代码也不正确，因为您实际上没有使用jQuery。您只是在字符串上调用方法
.val（）
“#selected option:selected”
，而该字符串应该是传递给jQuery本身的jQuery选择器：

if（$（“#select option:selected”）.val（2））{/$是执行所有工作的jQuery对象

然而，即使这样也不正确，因为您只需立即检查元素的值。您需要等待元素被更改。其他答案很好地解释了如何执行此操作

代码的问题在于：

它在语法上不正确-
（“#选择选项：已选择”）。val（2）
是一个表达式，反过来应将其括在括号中，作为
if
的适当条件，如下所示：

if（（“#选择选项：已选择”）.val（2））{

但是，即使在这之后，您的代码也不正确，因为您实际上没有使用jQuery。您只是在字符串上调用方法
.val（）
“#selected option:selected”
，而该字符串应该是传递给jQuery本身的jQuery选择器：

if（$（“#select option:selected”）.val（2））{/$是执行所有工作的jQuery对象

然而，即使这样也不正确，因为您只需立即检查元素的值。您需要等待元素被更改。其他答案很好地解释了如何执行此操作

将其签出并与change（）事件一起使用。将其签出并与change（）事件一起使用。
document.querySelector('#choose').addEventListener('change', function () {
    var element = document.getElementById('hide-me');
    if (this.value === "2") {
        element.style.display = 'none';
    } else {
        element.style.display = 'block';
    }
});

$('#choose').change(function(){
   $("#hide-me").toggle($(this).val() != "2");
})