选中所有选择同一类的选项

时间:2015-11-15 09:23:30

标签: javascript jquery

我正在尝试检查是否选择了同一个类的所有下拉列表意味着对于指定的类Select Subject,所选的val不应该是DD_Sub,如果所有下拉列表都有问题选中的值Select Subject然后它会提醒选择该选项,但是如果其中任何一个DD值被更改,但剩下的仍然包含值Select Subject,那么它也表示所有选中的值都不应该发生。

小提琴: http://jsfiddle.net/shaikasifpasha3/vjtpd4vx/1/#&togetherjs=fIsDmsKDm6

HTML:

<select class="DD_Sub" >
    <option value="Select Subject">  Select Subject  </option>
    <option value="Holiday">  Holiday  </option>
    <option value="Lunch">  Lunch  </option>
    <option value="ECO-20">ECO-20</option>
</select>
<br/>
<select  class="DD_Sub" >
    <option value="Select Subject">  Select Subject  </option>
    <option value="Holiday">  Holiday  </option>
    <option value="Lunch">  Lunch  </option>
    <option value="ECO-20">ECO-20</option>
</select>
<br/>
<select class="DD_Sub" >
    <option value="Select Subject">  Select Subject  </option>
    <option value="Holiday">  Holiday  </option>
    <option value="Lunch">  Lunch  </option>
    <option value="ECO-20">ECO-20</option>
</select>
<input type="submit" value="Click Me" onclick="return CheckDD();" id="BodyHolder_Add_New_period_button">

JS:

 function CheckDD() {
     // The .each() method is unnecessary here:
     $(".DD_Sub").each(function() {
         if ($(this).val() == "Select Subject") {
             alert("Select Subject");
             return false;
         } else {
             alert("All Selected");
             return false;
         }

     });
 }

4 个答案:

答案 0 :(得分:2)

function CheckDD() {
  if ($(".DD_Sub option:selected[value='Select Subject']").length > 0) {
    alert('Select Subject');   
  }
  else {
    alert('All Selected');
  }
  return false;
}

答案 1 :(得分:2)

尝试使用.get()Array.prototype.every()

&#13;
&#13;
function CheckDD() {

  // The .each() method is unnecessary here:
  $(".DD_Sub").get().every(function(el) {

    return $("option:selected", el).val() == "Select Subject"

  }) ? alert("All Selected") : alert("Select Subject");
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="DD_Sub">
  <option value="Select Subject">Select Subject</option>
  <option value="Holiday">Holiday</option>
  <option value="Lunch">Lunch</option>
  <option value="ECO-20">ECO-20</option>



</select>
<br/>
<select class="DD_Sub">
  <option value="Select Subject">Select Subject</option>
  <option value="Holiday">Holiday</option>
  <option value="Lunch">Lunch</option>
  <option value="ECO-20">ECO-20</option>



</select>
<br/>
<select class="DD_Sub">
  <option value="Select Subject">Select Subject</option>
  <option value="Holiday">Holiday</option>
  <option value="Lunch">Lunch</option>
  <option value="ECO-20">ECO-20</option>



</select>


<input type="submit" value="Click Me" onclick="return CheckDD();" id="BodyHolder_Add_New_period_button">
&#13;
&#13;
&#13;

答案 2 :(得分:2)

尝试这种方法:

 function CheckDD() {
     // state of validation - true by default
     var allValid = true;
     $(".DD_Sub").each(function () {
         // check if value was selected
         if ($(this).val() == "Select Subject") {
             alert("Select Subject");
             // if value is not selected set state to false
             allValid = false;
             return false;
         }
     });
     // display success only if state is true
     if (allValid === true) {
         alert("All Selected");
     }
     //return the result
     return allValid;
 }

以下是更新后的jsFiddle

答案 3 :(得分:1)

if($('.DD_Sub option[value="Select Subject"]').is(':selected')){
    alert('Select Subject');
} else {
    alert('All Selected');
}