Question

我有以下代码：

$("#dropdowncities").change(function () {
if ($('#dropdowncities option:selected').val()) {
    $(".filter-dot").removeClass("hide");
    $(".filter-dot").addClass("show");
} else {
    $(".filter-dot").removeClass('show');
    $(".filter-dot").addClass("hide");
}
});

.filter-dot {
    width:10px;
    height:10px;
    background:red;
    border-radius:50%; 
}

.show {display:block;}

.hide {display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="filter-dot hide"></div>

<select id="dropdowncities">
    <option>Select</option>
    <option>This is an option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
</select>

我要这样做，以便如果选择框具有任何选项，那么必须显示“ filter-dot”元素，而当选择框没有选择任何选项时，则必须隐藏“ filter-dot”元素。

Answer 1

您正在检查该值是否为伪造，您真的要检查当前值是否不是默认值。您可以通过将当前值与文本“选择”进行比较来做到这一点：

$("#dropdowncities").change(function () {
  switch($('#dropdowncities option:selected').val()) {
    case "Select":
      $(".filter-dot").removeClass('show');
      $(".filter-dot").addClass("hide");
      break;
    default:
      $(".filter-dot").removeClass("hide");
      $(".filter-dot").addClass("show");
  }
});

.filter-dot {
    width:10px;
    height:10px;
    background:red;
    border-radius:50%; 
}

.show {display:block;}

.hide {display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="filter-dot hide"></div>

<select id="dropdowncities">
    <option>Select</option>
    <option>This is an option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
</select>

Answer 2

好的，我不好。在我的代码中，我有这行：

<option>Select</option>

阻止jquery正常工作。如果我将其更改为<option></option>，则效果很好。

$("#dropdowncities").change(function () {
if ($('#dropdowncities option:selected').val()) {
    $(".filter-dot").removeClass("hide");
    $(".filter-dot").addClass("show");
} else {
    $(".filter-dot").removeClass('show');
    $(".filter-dot").addClass("hide");
}
});

.filter-dot {
    width:10px;
    height:10px;
    background:red;
    border-radius:50%; 
}

.show {display:block;}

.hide {display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="filter-dot hide"></div>

<select id="dropdowncities">
    <option></option>
    <option>This is an option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
</select>

Answer 3

$("#dropdowncities").change(function () {
if ($('#dropdowncities option:selected').val() > 0)  {
    $(".filter-dot").removeClass("hide");
    $(".filter-dot").addClass("show");
} else {
    $(".filter-dot").removeClass('show');
    $(".filter-dot").addClass("hide");
}
});

.filter-dot {
    width:10px;
    height:10px;
    background:red;
    border-radius:50%; 
}

.show {display:block;}

.hide {display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="filter-dot hide"></div>

<select id="dropdowncities">
    <option value="0">Select</option>
    <option value="1">This is an option</option>
    <option value="2">This is another Option</option>
    <option value="3">This is another Option</option>
    <option value="4">This is another Option</option>
    <option value="5">This is another Option</option>
    <option value="6">This is another Option</option>
    <option value="7">This is another Option</option>
    <option value="8">This is another Option</option>
    <option value="9">This is another Option</option>
    <option value="10">This is another Option</option>
</select>

它将为您服务。

Answer 4

更改最少的解决方案将value=0添加到您的第一个选项元素中，并将条件添加到jquery函数($(this).val()!=0)中，以检查所选选项的值并相应地添加/删除类。

$("#dropdowncities").change(function () {
if ($(this).val()!=0) {
    $(".filter-dot").removeClass("hide");
    $(".filter-dot").addClass("show");
} else {
    $(".filter-dot").removeClass('show');
    $(".filter-dot").addClass("hide");
}
});

.filter-dot {
    width:10px;
    height:10px;
    background:red;
    border-radius:50%; 
}

.show {display:block;}

.hide {display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="filter-dot hide"></div>

<select id="dropdowncities">
    <option value='0'>Select</option>
    <option>This is an option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
</select>

Answer 5

我们只需要将值添加到选项中即可找到：

  `$("#dropdowncities").change(function ()
  {
       if($(this).val()  ==  "")
       {
           $(".filter-dot").removeClass("show");
           $(".filter-dot").addClass("hide");
       } 
       else
      {
           $(".filter-dot").removeClass('hide');
           $(".filter-dot").addClass("show");
      }
 });`

 `.filter-dot {
      width:10px;
      height:10px;
      background:red;
      border-radius:50%; 
  }

 .show {display:block;}

 .hide {display:none;}`

 `<script     src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/j query.min.js"></script>

  <div class="filter-dot hide"></div>

  <select id="dropdowncities">
         <option value="">Select</option>
         <option value="This is an option">This is an option</option>
         <option value="This is another Option">This is another option</option>
         <option value="This is another Option">This is another option</option>
    </select>'

选择选择框选项后，执行其他操作，否则使用jquery执行其他操作

5 个答案: