隱藏當前選擇的選項

我正在使用JQuery出現問題。我有2個選擇字段。隱藏當前選擇的選項

<select id="cat" name="cat_id"> 
    <option value="2">Cat 2</option> 
    <option value="3">Cat 3</option> 
    <option value="4">Cat 4</option> 
</select> 

<select id="subcat" name="subcat_id"> 
    <option class="subcats cat_2" value="1">Subcat 1</option> 
    <option class="subcats cat_2" value="2">Subcat 2</option> 
    <option class="subcats cat_3" value="3">Subcat 3</option> 
    <option class="subcats cat_3" value="4">Subcat 4</option> 
    <option class="subcats cat_3" value="5">Subcat 5</option> 
    <option class="subcats cat_0" value="0">No subcats for this cat</option> 
</select>

這裏是我的JavaScript代碼

<script type="text/javascript"> 

var curval = $("#cat").val(); 
$(".subcats").hide(0); 
$(".cat_"+curval).show(0); 

$("#cat").change(function(){ 

    var cat = $(this).val(); 
    $(".subcats").removeAttr("selected").hide(0); 
    if($(".cat_"+cat).length == 0){$(".cat_0").show(0);} 
    else{$(".cat_"+cat).show(0);} 
}); 

</script>

這是問題所在。當我更改cats select的值時，subcats的選項已正確更改。但是，當前選擇的字段仍然顯示（即使它不對應於當前的貓）。

任何幫助將不勝感激。

來源

2014-10-20 Anthon95

你想隱藏所選屬性添加到第一個元素貓2被隱藏，如果選擇了任何一個子貓2？或者你想讓整個id =「cat」隱藏？ – vaso123 2014-10-20 14:43:48

@lolka_bolka我想他希望單個組合框具有基於不同組合框的值的選項。所以，這是一個重複的問題，在這種情況下：http://stackoverflow.com/questions/22462390/populate-combobox-values-with-another-combo-values-in-js – charles 2014-10-20 14:45:25

是的，使用hide/show（）是不是選擇選項的好選擇。最好動態重建列表。 – wwwmarty 2014-10-20 14:49:37

你應該改變你的代碼一點點等等焊割事件可以在可用的選項:)

var curval = $("#cat").val(); 
 
$(".subcats").hide(0); 
 
$(".cat_" + curval).show(0); 
 

 
$("#cat").change(function() { 
 

 
    var cat = $(this).val(); 
 
    $(".subcats").removeAttr("selected").hide(0); 
 
    if ($(".cat_" + cat).length == 0) { 
 
    $(".cat_0").attr("selected", "selected").show(0); 
 
    } else { 
 
    $(".cat_" + cat).eq(0).attr("selected", "selected"); 
 
    $(".cat_" + cat).show(0); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 
<select id="cat" name="cat_id"> 
 
    <option value="2">Cat 2</option> 
 
    <option value="3">Cat 3</option> 
 
    <option value="4">Cat 4</option> 
 
</select> 
 
<select id="subcat" name="subcat_id"> 
 
    <option class="subcats cat_2" value="1">Subcat 1</option> 
 
    <option class="subcats cat_2" value="2">Subcat 2</option> 
 
    <option class="subcats cat_3" value="3">Subcat 3</option> 
 
    <option class="subcats cat_3" value="4">Subcat 4</option> 
 
    <option class="subcats cat_3" value="5">Subcat 5</option> 
 
    <option class="subcats cat_0" value="0">No subcats for this cat</option> 
 
</select>

來源

2014-10-20 14:45:27

Addind $（「.cat_」+ cat）.eq（0）.attr（「selected」，「selected」）;線路完美運行，我甚至不知道這是存在的。謝謝。 – Anthon95 2014-10-20 15:04:27

隱藏當前選擇的選項

回答

相關問題