隐藏当前选择的选项

我正在使用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

隐藏当前选择的选项

回答

相关问题