Question

结束目标是仅显示div，其中包含的文本等于选择菜单/下拉列表的文本。但是，如果我能弄清楚如何隐藏它们，我想我可以去那里。所以我有一段HTML：

<select id="select">
<option selected>Show All</option>
<option>Red</option>
<option>Blue</option>
</select>

<div class="row">
<div class="option">red</div>
</div>
<div class="row">
<div class="option">blue</div>
</div>
<div class="row">
<div class="option">red</div>
</div>
<div class="row">
<div class="option">blue</div>
</div>

和一些jQuery：

$("#select").change(function () {
var text = $(".text").text();
var option = $("#select  option:selected").text();
if(text === option)
$( ".option:contains(" + text + ")" ).parent('div').hide();
});

我觉得我尝试了各种各样的东西，没有运气。如果我将文本的值设置为开头，那么这很容易，这里的诀窍是让要查找的文本取决于<select>，这样理论上你只需要添加选项那个。对此有何建议？

Answer 1

这是一个有效的jsfiddle：https://jsfiddle.net/dumqz5kL/

工作脚本：

$(document).ready(function(){
    $("#select").change(function () {
        _obj = $('option:selected', this);
        if (_obj.index() == 0) {
            $('.row').show();
        } else {
            $('.row').hide();
            $('.option').each(function(){
                if ($(this).text() == _obj.text().toLowerCase()) {
                    $(this).parent().show();
                };
            });
        };
    });
});

隐藏包含等于所选文本的文本的div？

1 个答案: