更新選擇多個

Question

我試圖編寫一個函數來更新「多個」選擇（下面第二個），這樣當我選擇Method1（從第一個選擇）時，只有選項1A，1B和1C出現在第二個選擇，同樣對於2A，2B ......只有當我選擇Method2時。有沒有辦法做到這一點。請幫忙。 非常感謝提前。

<select name="choices" onchange="updatesub()"> 
    <option>Method1</option> 
    <option>Method2</option> 
</select> 

<select multiple="multiple" name="sub"> 
    <option>1A</option> 
    <option>1B</option> 
    <option>1C</option> 

    <option>2A</option> 
    <option>2B</option> 
    <option>2C</option> 
</select> 

Answer 1

我不認爲有跨瀏覽器支持隱藏選擇選項。

以下是一種方法。使用更類似於jQuery的處理事件的方法，因此您需要從HTML中刪除內聯onchange。

試試看：http://jsfiddle.net/W9KvT/

var options = [ 
    ['1A','1B','1C'], 
    ['2A','2B','2C'] 
]; 

$('select[name=choices]').change(function() { 
    var idx = $(this).children(':selected').index(); 
    var set = ''; 
    for(var i = 0, len = options[idx].length; i < len; i++) { 
     set += '<option>' + options[idx][i] + '</option>'; 
    } 
    $('select[name=sub]').html(set); 
}).change(); 

如果您不希望產生這些上飛每次，您可以創建每個選項字符串，並將其保存在陣列中，在其中加載類似的方式。

試試看：http://jsfiddle.net/W9KvT/1

var options = [ 
    '<option>1A</option><option>1B</option><option>1C</option>', 
    '<option>2A</option><option>2B</option><option>2C</option>' 
]; 

$('select[name=choices]').change(function() { 
    var idx = $(this).children(':selected').index(); 
    $('select[name=sub]').html(options[idx]); 
}).change(); 

---

編輯：正如@You指出，爲了確保與已禁用JavaScript的瀏覽器兼容，最好是有頁面加載時可用的所有可用選項。然後，您可以使用上面的代碼爲js瀏覽器覆蓋它們。

從@的<optgroup>元素你的答案在這種情況下是一個好主意。

Answer 2

隱藏元素並不是你應該做的，真的（因此，在Webkit或IE中是不可能的）。不過，您可以禁用它們。使用此HTML：

<select id="choices"> 
    <option value="grp1">Method 1</option> 
    <option value="grp2">Method 2</option> 
</select> 

<select id="sub" multiple> 
    <optgroup label="Method 1" id="grp1"> 
     <option>1A</option> 
     <option>1B</option> 
     <option>1C</option> 
    </optgroup> 
    <optgroup label="Method 2" id="grp2"> 
     <option>2A</option> 
     <option>2B</option> 
     <option>2C</option> 
    </optgroup> 
</select> 

和jQuery：

$(document).ready(function(){ 
    $("#choices").change(function(){ 
     $("#sub optgroup").attr("disabled", true); 
     $("#sub optgroup#"+$(this).val()).attr("disabled", false); 
    }); 
    $("#choices optgroup:not(#"+$("#choices option:selected").val()+")").attr("disabled", true); 
}); 

你會基本上禁用不適用的選項，這是「正確」的方式去了解的東西。 （並使用<optgroup>，這就是它是！）

_{免責聲明：我無法在Safari中得到這個工作，但根據HTML4.01和HTML5規範，這應該工作。我不確定發生了什麼事。}