改变<select>选项使用jQuery的.change功能

我面临这个问题超过3小时，因为我仍然在学习JavaScript和jQuery .. 我想改变基于用户选择相同的选择输入选择选项.. 我不知道该如何解释好，但看到这个http://jsfiddle.net/YKASE/改变<select>选项使用jQuery的.change功能

的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>

的JS：

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

的CSS：

.hidden { 
display: none; 
}

的问题是，只有一个选项，但我想告诉他们所有..

来源

2013-03-27 iguider

** HTML不允许重复的元素ID。**改为使用类。 – 2013-03-27 19:27:35

第一个问题是，你不能有多个元素相同的ID（你有3个选项相同的ID“1”） – vdua 2013-03-27 19:27:43

谢谢.. 我没有注意到.. – iguider 2013-03-27 19:29:45

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

<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"); 
});

来源

2013-03-27 19:39:30

可以使用['.data（“index”）']（http://api.jquery.com/data/）检索数据值。 – 2013-03-27 20:11:56

改变<select>选项使用jQuery的.change功能

回答

相关问题