代码之家 › 专栏 › 技术社区 › Reece

名称属性选择器不工作

html jquery javascript

Reece · 技术社区 · 8 年前

我正在尝试使用名称属性选择器检查是否选择了选项值,但由于某些原因,该选项值不起作用。你能理解为什么或者给我另一个解决方案吗?我知道我可以简单地在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>

3 回复 | 直到 8 年前

BenM 8 年前

由于元素的名称完全匹配,因此不需要使用修饰符。相反,使用 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>

cÐ½Ådk 8 年前

实际上你的选择器是正确的,但是条件是错误的,检查是否有 option 选择您可以使用此代码:

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

注:

当然,您需要在 change 您的事件处理程序 select 以反映变化。

演示:

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>

Parth Raval 8 年前

你需要捆绑 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>