从多个下拉菜单中过滤选择

Question

当使用 id='id_property':

从下拉菜单中选择特定项目时，我使用 class='kd' 显示或隐藏 div

    $(document).ready(function(){
      $("select#id_property").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue == "G"){
                $(".kd").fadeIn()
            } else{
                $(".kd").hide();
            }
        });
      }).change();
    });

是否可以从多个下拉菜单中过滤选择并根据两个选择隐藏或显示项目？

类似于：

   $("select#id_property", "select#id_name").change(function(){
       $(this).find("option:selected").each(function(){
            var optionValue1 = $(this).attr("value");
            ...
        });
     });

HTML

<select name="property" class="select form-control" required id="id_property">
  <option value="" selected>---------</option>
  <option value="G">G</option>
  <option value="E">E</option>
</select>
<select name="name" class="select form-control" required id="id_name">
  <option value="" selected>---------</option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>
<div class="form-row row kd">
      <label for="id_some_field" class="form-label ">Some Field</label>
      <input type="text" name="some_field" maxlength="128" class="textinput textInput form-control" id="id_some_field"> 
</div>

Answer 1

好的，你要做的是使用以逗号分隔的多个选择器 , ,

$("select#id_property , select#id_name").on("change", function() {...})

并在回调函数中使用 $(this).val() 访问每次输入更改时的值：

请参阅以下代码段：

$(document).ready(function() {

  let selectValues = [];

  $("select#id_property , select#id_name").on("change", function() {
      var id = $(this).attr("id");
      var optionValue = $(this).val();

      selectValues[id] = optionValue;
      let chars = "";
      for (var key in selectValues) {
        chars += selectValues[key];
    }

    if ( chars.includes("GG") || ( chars.includes("G") && chars.includes("A") ) ) {
        $(".kd").fadeIn()
      } else {
        $(".kd").hide();
      }
    });

  // for startup change 
  $("select#id_property , select#id_name").trigger("change");
});

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

property :
<select name="property" class="select form-control" required id="id_property">
  <option value="" selected>---------</option>
  <option value="G">G</option>
  <option value="E">E</option>
</select><br /><br /> name :
<select name="name" class="select form-control" required id="id_name">
  <option value="" selected>---------</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="G">G</option>
</select><br /><br />
<div class="form-row row kd">
  <label for="id_some_field" class="form-label ">Some Field</label>
  <input type="text" name="some_field" maxlength="128" class="textinput textInput form-control" id="id_some_field">
</div>

从多个下拉菜单中过滤选择

Filter selection from multiple dropdown menus

html

javascript

jquery

html-select

onchange