Question

当我从字段集下拉列表中选择某个选项值时，我试图隐藏元素。我不确定如何使用jQuery读取选项值中包含的文本（实际文本或值很好）：

<div class="filter_options">
            <input id="search_query" type="hidden" value="Texts" />
            <fieldset class="filterType">

                <label>Filter By Type</label><select id="search_filter_type">

<option value="">All</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option></select></fieldset>

        </div>

然后隐藏某些不包含所选值的div类“pg_list”。

            <div class="pg_list">
             <p>This text contains a Dog</p>
            </div>

            <div class="pg_list">
             <p>This text contains a Cat</p>
            </div>

            <div class="pg_list">
             <p>This text contains a Rabbit</p>
            </div>

所以如果我选择选项值 - 猫，那么它会隐藏包含狗或兔子的div，并离开Cat。

最后，我有以下.css准备好了：

.displayNone{
display: none;
}

希望这是有道理的。这是我的jQuery输入文本字段，但我无法弄清楚如何使用相同的基础来处理选定的下拉列表：

$('input').on('keypress keyup', function(){
var value = $(this).val().toLowerCase();
if (value != '') {

  $('.pg_list').each(function () {
    if ($(this).text().toLowerCase().indexOf(value) > -1) {
      $(this).removeClass('displayNone');  
    } else {
      $(this).addClass('displayNone');
    }
  });
} else {
  $('.pg_list').removeClass('displayNone');
}

}）;

感谢您的阅读。

Answer 1

首先，您需要选择正确的组件，即下拉框：$('#search_filter_type')。其次，您希望在下拉框的值更改时发生此情况：$('#search_filter_type').on('change', ...

＆＃13;

$('#search_filter_type').on('change', function() {
  var value = $(this).find('option:selected').text().toLowerCase();
  if (value != "all") {

    $('.pg_list').each(function() {
      if ($(this).text().toLowerCase().indexOf(value) > -1) {
        $(this).removeClass('displayNone');
      } else {
        $(this).addClass('displayNone');
      }
    });
  } else {
    $('.pg_list').removeClass('displayNone');
  }
});

＆＃13;

.displayNone {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter_options">
  <input id="search_query" type="hidden" value="Texts" />
  <fieldset class="filterType">

    <label>Filter By Type</label>
    <select id="search_filter_type">

      <option value="">All</option>
      <option value="Cats">Cat Pictures</option>
      <option value="Dogs">Dog Pictures</option>
    </select>
  </fieldset>

</div>
<div class="pg_list">
  <p>This text contains a Dog Pictures</p>
</div>

<div class="pg_list">
  <p>This text contains a Cat Pictures</p>
</div>

<div class="pg_list">
  <p>This text contains a Rabbit</p>
</div>

＆＃13;

Answer 2

在jQuery中，要读取<select>的值，它与<input>相同：

$('#my-select').val(); // where this is your select

您可以将其置于change事件中，这是更改时触发的事件：

$('#my-select').on('change', function() {
    var value = $(this).val().toLowerCase();
    // rest of your code
});

如果您需要所选选项的文本，可以改为使用：

$('#my-select').on('change', function() {
    var value = $(this).find('option:selected').text();
    // rest of your code
});

虽然您的设计略有改进，但可以为符合选项价值的每个<div>元素添加一个类。然后，您可以使用not()将其设置在除要保持可见的那个之外的所有内容上，而不是必须循环播放。

$('select').on('change', function () {
  var value = $(this).val();
  $('#divs').children() // all children of the proper parent
    .removeClass('displayNone') // remove 'displayNone' from them all
    .not('.' + value) // remove the one we aren't hiding
    .addClass('displayNone'); // add 'displayNone' to all remaining
});

.displayNone {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="">-- Select --</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="rabbit">Rabbit</option>
</select>
<div id="divs">
  <div class="cat">Cat</div>
  <div class="dog">Dog</div>
  <div class="rabbit">Rabbit</div>
</div>

通过这种方式，您不会将自己锁定在始终具有匹配文本的位置，从而为您提供更好的灵活性。您也无需循环并进行文本比较。

根据其他类

2 个答案: