名称属性选择器不起作用

Question

我正在尝试使用name属性选择器来检查是否选择了一个选项值但由于某种原因它无效。可以看到为什么或提供另一种解决方案？我知道我可以简单地在select标签上使用id，但我不想要jQuery解决方案。

的jQuery

if(jQuery('#beds select[name*="min_beds"] option').val()){
    alert('hi');
}

HTML

<div id="beds">
        <select name="min_beds">
            <option value="" disabled selected>Min Beds</option>
            <option value="1">1 Bed</option>
            <option value="2">2 Bed</option>
            <option value="3">3 Bed</option>
            <option value="4">4 Bed</option>
            <option value="5">5 Bed</option>
            <option value="6">6 Bed</option>
            <option value="7">7 Bed</option>
            <option value="8">8 Bed</option>
            <option value="9+">9+ Bed</option>
        </select>
        <p>to</p>
        <select name="max_beds">
            <option value="" disabled selected>Max Beds</option>
            <option value="1">1 Bed</option>
            <option value="2">2 Bed</option>
            <option value="3">3 Bed</option>
            <option value="4">4 Bed</option>
            <option value="5">5 Bed</option>
            <option value="6">6 Bed</option>
            <option value="7">7 Bed</option>
            <option value="8">8 Bed</option>
            <option value="9+">9+ Bed</option>
        </select>
    </div>

Answer 1

由于元素的名称完全匹配，因此无需使用修饰符。相反，请使用option:selected：

＆＃13;

＆＃13;

$('#beds').on('change', function() {
  if( $('#beds select[name="min_beds"] option:selected').val() ){
      alert('hi');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="beds">
        <select name="min_beds">
            <option value="" disabled selected>Min Beds</option>
            <option value="1">1 Bed</option>
            <option value="2">2 Bed</option>
            <option value="3">3 Bed</option>
            <option value="4">4 Bed</option>
            <option value="5">5 Bed</option>
            <option value="6">6 Bed</option>
            <option value="7">7 Bed</option>
            <option value="8">8 Bed</option>
            <option value="9+">9+ Bed</option>
        </select>
        <p>to</p>
        <select name="max_beds">
            <option value="" disabled selected>Max Beds</option>
            <option value="1">1 Bed</option>
            <option value="2">2 Bed</option>
            <option value="3">3 Bed</option>
            <option value="4">4 Bed</option>
            <option value="5">5 Bed</option>
            <option value="6">6 Bed</option>
            <option value="7">7 Bed</option>
            <option value="8">8 Bed</option>
            <option value="9+">9+ Bed</option>
        </select>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

实际上您的选择器是正确的，但条件错误，要检查是否选择了option您可以使用此代码：

if (jQuery('#beds select[name*="min_beds"]').val() !== null) {
  console.log("selected");
} else {
  console.log("not selected");
}

注意：

当然，您需要在change的{​​{1}}事件处理程序中附加此代码以反映更改。

<强>演示：

＆＃13;

＆＃13;

select

＆＃13;

if (jQuery('#beds select[name*="min_beds"]').val() !== null) {
  console.log("selected");
} else {
  console.log("not selected");
}

jQuery('#beds select[name*="min_beds"]').change(function() {

  if (jQuery(this).val() !== null) {
    console.log("selected");
  } else {
    console.log("not selected");
  }

});

＆＃13;

＆＃13;

＆＃13;

Answer 3

  

您需要在下拉列表中绑定change事件

$('#beds').change(function() {
    if ($('select[name="min_beds"] option:selected').val()) {
        alert('hi');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="beds">
   <select name="min_beds">
      <option value="" disabled selected>Min Beds</option>
      <option value="1">1 Bed</option>
      <option value="2">2 Bed</option>
      <option value="3">3 Bed</option>
      <option value="4">4 Bed</option>
      <option value="5">5 Bed</option>
      <option value="6">6 Bed</option>
      <option value="7">7 Bed</option>
      <option value="8">8 Bed</option>
      <option value="9+">9+ Bed</option>
   </select>
   <p>to</p>
   <select name="max_beds">
      <option value="" disabled selected>Max Beds</option>
      <option value="1">1 Bed</option>
      <option value="2">2 Bed</option>
      <option value="3">3 Bed</option>
      <option value="4">4 Bed</option>
      <option value="5">5 Bed</option>
      <option value="6">6 Bed</option>
      <option value="7">7 Bed</option>
      <option value="8">8 Bed</option>
      <option value="9+">9+ Bed</option>
   </select>
</div>