Question

我正面临这个问题超过3个小时，因为我还在学习javascript和jquery .. 我想根据用户的选择从同一个选择输入中更改选择选项。我不知道如何解释，但看到这个http://jsfiddle.net/YKASE/

HTML：

<select name="test" class="select" id="test" multiple="multiple" style="width: 100%;">
<option value="1" class="first">1</option>
<option value="2" class="first">2</option>
<option value="3" class="first">3</option>
<option value="a" id="1" class="hidden second">a</option>
<option value="b" id="1" class="hidden second">b</option>
<option value="c" id="1" class="hidden second">c</option>
<option value="x" id="2" class="hidden second">x</option>
<option value="y" id="2" class="hidden second">y</option>
<option value="z" id="2" class="hidden second">z</option>
<option value="baz" id="3" class="hidden second">baz</option>
<option value="bar" id="3" class="hidden second">bar</option>
<option value="foo" id="3" class="hidden second">foo</option>
</select>

THE JS：

$("select#test").change(function () {
    $("#" + $(this).val()).removeClass("hidden");
    $(".first").addClass("hidden");
});

CSS：

.hidden {
display: none;
}

问题是只显示了一个选项，但我想全部显示..

Answer 1

为选项添加自定义属性，并在整个组中保留相同的值。

<select name="test" class="select" id="test" multiple="multiple" style="width: 100%;">
    <option data-index="1" value="1" class="first">1</option>
    <option data-index="1" value="2" class="first">2</option>
    <option data-index="1" value="3" class="first">3</option>
    <option data-index="2" value="a" id="1" class="hidden second">a</option>
    <option data-index="2" value="b" id="1" class="hidden second">b</option>
    <option data-index="2" value="c" id="1" class="hidden second">c</option>
    <option data-index="2" value="x" id="2" class="hidden second">x</option>
    <option data-index="2" value="y" id="2" class="hidden second">y</option>
    <option data-index="2" value="z" id="2" class="hidden second">z</option>
    <option data-index="2" value="baz" id="3" class="hidden second">baz</option>
    <option data-index="2" value="bar" id="3" class="hidden second">bar</option>
    <option data-index="2" value="foo" id="3" class="hidden second">foo</option>
</select>


$("select#test").change(function () {
    //get the data-index attribute of the selected option
    var nIndex =     $('option[value= '+ $(this).val()+']').attr('data-index');
    //get all elements with the attribute data-index = nIndex
    $('option[data-index= '+ nIndex +']').removeClass("hidden");
    $(".first").addClass("hidden");
});

使用jquery .change函数</select>更改<select>选项

1 个答案: