嘿傢伙剛剛被告知,隱藏不能用於跨瀏覽器選擇元素選項。禁用基於類的選擇元素選項
所以我想知道如何使用禁用爲我有以下問題。
這個例子被簡化了,實際的代碼包含PHP循環和MySQL來顯示選項和內容。
好了,所以首先我有兩個選擇元素:
<select class="form-control select-box">
<option value="make-any">Make (Any)</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
<select class="form-control select-box-model">
<option value="make-any">Make (Any)</option>
<option value="C220">C220</option>
<option value="X1">X1</option>
<option value="X5">X5</option>
<option value="XC90">XC90</option>
</select>
我再有這些列表:
<div class="makes BMW X1">
<ul>
<li>BMW</li>
<li>X1</li>
</ul>
</div>
<div class="makes VOLVO XC90">
<ul>
<li>VOLVO</li>
<li>XC90</li>
</ul>
</div>
<div class="makes MERCEDES C220">
<ul>
<li>MERCEDES</li>
<li>C220</li>
</ul>
</div>
<div class="makes BMW X5">
<ul>
<li>BMW</li>
<li>X1</li>
</ul>
</div>
我目前使用這個jQuery的隱藏與類的DIV 「使」,如果所選擇的選項不div的類匹配,從而例如「BMW」:
<script>
$(document).ready(function(){
$('.form-control').change(function(){
var make = $(this).val();
if(make != 'make-any'){
$('.makes').hide();
$('.'+make).show();
} else {
$('.makes').show();
}
});
});</script>
所以一你可以看到我有點問題,因爲第二個select類型的元素包含了「select-box-model」類型的所有模型,我想禁用與第一個選擇無關的選項元素選項已被選中。
例如列表容器包含「製作」和每輛車的「模式」的類:
<div class="makes BMW X5">
那麼,如何可以禁用未與關聯的選項「製作」,例如,如果用戶選擇BMW作爲第一個元素,我只會喜歡與'Make'關聯的'Models'。
任何例子都會很棒,謝謝。
對於每一個品牌你都有一個單獨的選擇列表,而不是試圖在一個選擇中結合每個品牌的所有模型。然後你可以通過選擇列表而不是選項來顯示/隱藏。 – 2014-09-25 21:44:17
或者將選項值保存在數組中並填充選項。 – isherwood 2014-09-25 21:46:17