在选择列表中的jquery选择

我有一个关于jquery选择的问题。我想定位一个选择列表，当你从选择列表中选择“Dr”时，那么应该隐藏下面的div。在选择列表中的jquery选择

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

来源

2017-10-18 paulcap1

'Dr'应该是一个字符串 – 1252748

有很多错在这里。一瞥：

Dr是一个语法错误。字符串应该用引号括起来。
当页面加载时，您正在检查选定的值，而不给用户实际选择任何内容的机会。
您正在寻找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的当前状态。只要目标元素“更改”，该事件处理程序就会被调用。（其值已由用户修改。）
用select替换选择器，以将页面上的<select>表单元素作为目标。如果您的目标代码中有更多<select>元素，那么您也可以使用您的目标代码，或以多种方式中的任何一种来识别您的目标元素。
一旦调用change事件，代码会查找<select>中的选定选项并检查该选项的文本。（由于value是一个数字，而不是字符串'Dr'。）

我叉你CodePen这里展示。

此外，如果你想重新显示当另一个选项被选中的元素，你会添加一个else块：

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

来源

2017-10-18 15:03:35 David

谢谢！我正在了解定位值与文本之间的区别。我在这里创造了另一支针对价值的笔。 https://codepen.io/leisureman/pen/vevMgP – paulcap1

添加了其他。 https://codepen.io/leisureman/pen/VMqoYG – paulcap1

了一些错误。首先你需要用引号括起字符串。接下来，您想要在有人进行更改时检查选择列表，因此您不想使用.each()而是使用.change()事件。然后，您不想检查数值，因为使用.text()或.html()可以获取所选选项的内容而不是.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>

来源

2017-10-18 15:00:49 j08691

在选择列表中的jquery选择

回答

相关问题