Javascript 使用jquery.change函数更改选项
我面对这个问题已经3个多小时了,因为我还在学习javascript和jquery。。 我想根据用户对同一选择输入的选择更改选择选项。。 我不知道该怎么解释,但我明白了 HTML:Javascript 使用jquery.change函数更改选项,javascript,jquery,html,Javascript,Jquery,Html,我面对这个问题已经3个多小时了,因为我还在学习javascript和jquery。。 我想根据用户对同一选择输入的选择更改选择选项。。 我不知道该怎么解释,但我明白了 HTML: <select name="test" class="select" id="test" multiple="multiple" style="width: 100%;"> <option value="1" class="first">1</option> <option v
<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>
CSS:
.hidden {
display: none;
}
问题是只显示一个选项,但我想全部显示。向选项添加自定义属性,并在整个组中保持相同的值
<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");
});
HTML不允许重复的元素ID。请改用类。第一个问题是不能有多个id相同的元素。您有3个id相同的选项1个。。我没有注意到…我把它改成了类,它工作了。。非常感谢:Ddata值可以通过检索。
<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");
});