检查是否有任何选项然后显示div

时间:2017-09-20 13:37:46

标签: javascript jquery html css

我想检查select中是否有选项然后显示div如果没有则隐藏。我没有检查选定的选项我正在检查所有选项。

from program import DoSomething

class Window(Frame)
    def __init__(self,master = None):
        <Stuff In Window>

    def addWidgets(self):
        <Widgets To Add>

    def init_window(self):
        self.pack(fill=BOTH, expand=1)
        RunButton = Button(self, text="Run", command=<**What Goes Here To Run sampleProgram?**>)
if (jQuery(".sd select option").text() == 'S') {
  console.log('hello');
}

3 个答案:

答案 0 :(得分:1)

  

如果选择

中有选项

您可以使用.filter()迭代选项并检查匹配项的长度,类似于此。

&#13;
&#13;
var hasOptionS = $('select option').filter(function(){return this.text.trim().toUpperCase() === 'S'}).length > 0;

var hasOptionP = $('select option').filter(function(){return this.text.trim().toUpperCase() === 'P'}).length > 0;

console.log('has Option S:', hasOptionS);
console.log('has Option P:', hasOptionP);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="input-box sd">
        <select name="options[1261]" id="select_1261" class=" required-entry product-custom-option" title="">
         <option value="">-- Please Select --</option>
         <option value="6888" price="0">S </option>
         <option value="6889" price="0">M </option>
        </select>                                
    </div>
&#13;
&#13;
&#13;

  

然后显示div如果不然后隐藏

您可以在条件检查中使用结果,类似于:

if(hasOption){
  $(yourDiv).show();
} else {
  $(yourDiv).hide();
}

答案 1 :(得分:0)

var theSelect = document.getElementById("select_1261");
var stop = false;
for (var i = 0; i < theSelect.options.length & stop != true; i++) {
  switch (theSelect.options[i].innerHTML) {
    case "S ":
    case "M ":
      document.getElementById("cooldiv").style.display = "none";//hide the div
      stop = true;
      break;
    default:
      break;
  }
}

答案 2 :(得分:-1)

$('.dropdown').each(function() {
  var _length = $(this).children('option').length - 1;
  //console.log(_length);
  
  if (_length < 1) {
    $(this).hide();
  }
});
.dropdown-box {
  display: inline-block;
  background-color: #F4F4F4;
  margin: 10px;
  padding: 20px;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dropdown-box">
  <p>Has values:</p>
  <div class="input-box">
    <select name="options[1261]" id="select_1261" class="dropdown">
       <option value="">-- Please Select --</option>
       <option value="6888" price="0">S </option>
       <option value="6889" price="0">M </option>
    </select>
  </div>
</div>

<div class="dropdown-box">
  <p>Has no values:</p>
  <div class="input-box">
    <select name="options[1261]" id="select_1261" class="dropdown">
       <option value="">-- Please Select --</option>
      </select>
  </div>
</div>