改變<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功能

回答

相關問題