下拉菜单：如果有任何下拉菜单=值，则显示 div

Question

基本上只要选择'bfcn'就会显示BFCN 不管下一个值是否不等于BFCN，只要一个等于该值，继续显示

现在的问题是，无论何时选择其中一个，它都会隐藏 div。

if 'dropdown1 = bfcn' = 显示 DIV 要么如果 'dropdown2 = bfcn' = 显示 DIV

如果任何下拉菜单等于 BFCN

，则需要保持 DIV 显示

http://jsfiddle.net/SmokeyLlama/f375e6wv/1/

HTML

<select title="Select 1" id="select1">
    <option value="">Select an option</option>
    <option value="1">1</option>
    <option value="4">bfcn</option>
 </select>
 <select title="Select 2" id="select2">
    <option value="">Select an option</option>
    <option value="3">3</option>
    <option value="4">bfcn</option>
 </select>
 <p class="wireless" style="display: none;">BFCN</p>

脚本

 $(document).ready(function(){
    $('select').change(function(){
      if (($(this).val() == '4')){
        $('.wireless').show();
      } else {
        $('.wireless').hide();
      }
   });
 });

Answer 1

为此，我将保留一个变量，如果任何 select 具有 val() == 4，我将更新该变量：

 $(document).ready(function(){
    $('select').change(function(){
     var show = false;
     $('select').each(function () {
            if ($(this).val() == 4){
         show = true;
           }
        });
      
        if (show){
            $('.wireless').show();
        } else {
            $('.wireless').hide();
        }
   });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select title="Select 1" id="select1">
    <option value="">Select an option</option>
    <option value="1">1</option>
    <option value="4">bfcn</option>
 </select>
 <select title="Select 2" id="select2">
    <option value="">Select an option</option>
    <option value="3">3</option>
    <option value="4">bfcn</option>
 </select>
 <p class="wireless" style="display: none;">BFCN</p>

Answer 2

您可以执行如下操作。检查代码以获取评论，如果您有任何问题，请告诉我：

//Create references to our DOM elements
const containerEl = document.querySelector('#container');
const wirelessEl = document.querySelector('.wireless');
const selectEls = document.querySelectorAll('select');

//Check if one of the select elements has the required value onchange
const onChange = e => {
  const [select1, select2] = Array.from(selectEls);
  if (select1.value === '4' || select2.value === '4') {
    wirelessEl.style.display = 'inline';
  } else {
    wirelessEl.style.display = 'none';
  }
};

//Use event delegation, so we only have to add 1 event listner on the parent element
containerEl.addEventListener('change', onChange);

<div id="container">
  <select title="Select 1" id="select1">
    <option value="">Select an option</option>
    <option value="1">1</option>
    <option value="4">bfcn</option>
  </select>
  <select title="Select 2" id="select2">
    <option value="">Select an option</option>
    <option value="3">3</option>
    <option value="4">bfcn</option>
  </select>
</div>
<p class="wireless" style="display: none;">BFCN</p>

Answer 3

您可以使用 filter() to return collection of the selects that have that value and use the length to create a boolean for toggle(display)

var $sel = $('select').change(function() {

  var hasBcn = $sel.filter(function() {
    return $(this).val() === '4';
  }).length > 0;

  $('.wireless').toggle(hasBcn);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select title="Select 1" id="select1">
  <option value="">Select an option</option>
  <option value="1">1</option>
  <option value="4">bfcn</option>
</select>
<select title="Select 2" id="select2">
  <option value="">Select an option</option>
  <option value="3">3</option>
  <option value="4">bfcn</option>
</select>
<p class="wireless" style="display: none;">BFCN</p>

下拉菜单：如果有任何下拉菜单=值，则显示 div

Dropdowns: IF ANY dropdown=value, show div

html

javascript

jquery

show