Question

我想根据选择框的多个值显示一些div＃选项的子项。

HTML：

<select id="select">
<option selected="selected" value="">- Select -</option>
<option value="4">4th Option</option>
<option value="5">5th Option</option>
<option value="6">6th Option</option>
<option value="7">7th Option</option>
<option value="8">8th Option</option>
<option value="9">9th Option</option>
</select>

<div id="options">
<div class="form-item-a">content a</div>
<div class="form-item-b">content b</div>
<div class="form-item-c">content c</div>
<div class="form-item-d">content d</div>
<div class="form-item-e">content e</div>
<div class="form-item-f">content f</div>
<div class="form-item-g">content g</div>
</div>

恐怕没有与之相关的有用课程。

我在下面尝试过，但只适用于单个值，而我希望有一系列值：

$('#select').change(function (e) {
    // Strange, without pseudo :checked, no event triggered.
    var options = $(this).find('option:checked').val();

    // Show .form-item-a, if values 4, 5, 6
    $('.form-item-a').toggle($('option[value="4, 5, 6"]:selected',this).length > 0);

    // Show .form-item-b, if values 5, 6, 7
    $('.form-item-b').toggle($('option[value="5, 6, 7"]:selected',this).length > 0);

     // etc.
 $('.form-item-c').toggle($('option[value="8, 9"]:selected',this).length > 0);
});

将数组值放在这里（value =“4,5,6”）显然是错误的，但这说明了我想要实现的目标，因为我不知道将它们放入数组jquery方式。如何将值放入数组中，因此可以将它们作为参数来切换某些div的可见性。或者有更好的方法来实现这一目标吗？

任何提示都会非常受欢迎。

由于

Answer 1

这段代码可能需要优化，但它会为您提供想法。

您可以使用数据属性：

<select id="select">
    <option selected="selected" value="">- Select -</option>
    <option value="4" data-showdiv='form-item-a'>4th Option</option>
    <option value="5" data-showdiv='form-item-a'>5th Option</option>
    <option value="6" data-showdiv='form-item-a'>6th Option</option>
    <option value="7" data-showdiv='form-item-b'>7th Option</option>
    <option value="8" data-showdiv='form-item-b'>8th Option</option>
    <option value="9" data-showdiv='form-item-b'>9th Option</option>
</select>

<div id="options">
    <div class="form-item-a">content a</div>
    <div class="form-item-b">content b</div>
    <div class="form-item-c">content c</div>
    <div class="form-item-d">content d</div>
    <div class="form-item-e">content e</div>
    <div class="form-item-f">content f</div>
    <div class="form-item-g">content g</div>
</div>

和jquery代码：

$('#select').change(function (e) {
    var $this = $(this),
        val = $this.val(),
        toShow = $this.find('option:selected').data('showdiv');

    // hide all divs
    $('#options > div').hide();

    // show the one
    $('.' + toShow).show();

});

希望它有所帮助，d。

为了真正满足您需要显示多个div选项，数据属性解决方案无法正常显示。

我认为你可以根据你的情况采取这种方式：

$('#select').change(function (e) {

    // no need to get the option, val() on the select works
    var val= $(this).val();

    // no need to re-select the option for the value, you just selected it
    $('.form-item-a').toggle((val === "4" || val === "5" || val === "6"));
    $('.form-item-b').toggle((val === "5" || val === "6" || val === "7"));

});

根据多个选择值切换div可见性

1 个答案: