名称属性选择器不起作用

Question

我正在尝试使用名称属性选择器来检查是否选择了选项值，但由于某种原因它不起作用。可以了解原因或提供另一种解决方案吗？我知道我可以简单地在 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:

$('#beds').on('change', function() {
  if( $('#beds 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>

Answer 2

实际上你的选择器是正确的但条件是错误的，要检查是否有一个option被选中，你可以使用这个代码：

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

注意：

当然，您需要将此代码附加到您的select 的change 事件处理程序中以反映更改。

演示：

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");
  }

});

<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>

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>