jquery selection 在 select 列表中

Question

我有一个关于 jquery selection 的问题。我想定位一个 select 列表，当你从 select 列表中 select "Dr" 时，下面的 div 应该被隐藏。

$(document).ready(function(){
var num = Dr;
$("div#myselect select.select option").each(function(){
    if($(this).selected()==num){
        $(".test1").hide();   
    }
  });
});

Answer 1

一些错误。首先，您需要将字符串括在引号中。接下来您想在有人进行更改时检查 select 列表，因此您不想使用 .each() 而是 .change() 事件。然后您不想检查该值，因为它是数字，所以使用 .text() 或 .html() 来获取 selected 选项的内容而不是 .val().

示例：

$(document).ready(function() {
  var num = 'Dr';
  $("#myselect").change(function() {
    if ($(this).find('option:selected').text() == num) {
      $(".test1").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>

<div class="test1">test1</div>

Answer 2

这里有很多错误。快速浏览：

Dr 是语法错误。字符串应该用引号引起来。
您在页面加载时检查一次 selected 值，没有给用户实际 select 任何东西的机会。
您正在寻找 select 和 class="select"，它在您的 HTML 中不存在。
您也在寻找 div 和 id="myselect"，它在您的 HTML 中也不存在。
没有 .selected() 函数。

我怀疑你的意思更像是以下内容：

$(document).ready(function(){
    var num = 'Dr';
    $("select").change(function(){
        if($(this).find('option:selected').text()==num){
            $(".test1").hide();   
        }
    });
});

注意变化：

用引号将 Dr 括起来，因为它是一个字符串。
创建一个 change 事件处理程序，而不是直接检查 HTML 的当前状态。任何时候目标元素 "changes" 都会调用此事件处理程序。（其值已被用户修改。）
将 selector 替换为仅 select 以定位页面上的 <select> 表单元素。如果目标代码中有更多 <select> 元素，那么您还可以使用现有的 id 元素，或以多种方式识别目标 <select> 元素。
调用 change 事件后，代码在 <select> 中查找 selected 选项并检查 text选项。（因为 value 是一个数字而不是字符串 'Dr'。）

我在这里 fork 你的 CodePen 来演示。

此外，如果您想 重新显示 另一个选项 select 时的元素，您需要添加一个 else 块：

if($(this).find('option:selected').text()==num){
    $(".test1").hide();   
} else {
    $(".test1").show();
}

jquery selection 在 select 列表中

jquery selection on a select list

jquery

jquery-selectors