Javascript 下拉列表值隐藏显示

我有两个下拉菜单，这是小提琴

当用户从DDLCOPTION下拉列表中选择Yes时，我只想在ddlCar下拉列表中显示萨博和奥迪的2个值，当用户选择No时，我想在ddlCar下拉列表中查看所有值

请告诉我Jquery代码的任何可能性。谢谢

$ddlOption.changefunction{ $ddlCar.val.find[value=1]，[value=3]。切换此选项。value==2； }; -选择一个选项- 对 不 -请选择一个名称- 沃尔沃汽车 萨博 梅赛德斯 奥迪 检查更新

在标记中，首先需要将类添加到下拉列表值中

<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1">Volvo</option>
<option value="2" class="yes">Saab</option>
<option value="3">Mercedes</option>
<option value="4" class="yes">Audi</option>
</select> 

拨弄

---

请检查下面的代码，我对您的代码做了一些更改

<script type="text/javascript">
function populateList() {
if($("option:selected",$("#ddlOption")).val()=="1")
{
    $(".val1").hide();
    $(".val2").show();
}
else if($("option:selected",$("#ddlOption")).val()=="2")
{
    $(".val1").show();
    $(".val2").hide();
}
else
{
    $(".val1").show();
    $(".val2").show();
}
}
</script>

<select id="ddlOption" onchange="populateList();">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1" class="val2">Volvo</option>
<option value="2" class="val1">Saab</option>
<option value="3" class="val2">Mercedes</option>
<option value="4" class="val1">Audi</option>
</select> 

---

如果您有任何疑问，请告诉我

您可以编写如下代码，该代码也适用于较大的对象值300或任何大小，并且是动态的。 这里optionOne、optionTwo是当选择Yes/No值时绑定的对象

试试这个：不是最干净的解决方案，但它可以跨浏览器工作

$function{ var carArray=[]； $'ddlCar option'。每个函数{ carArray.推$this； }; $ddlOption.changefunction{ 如果$'ddlOption'.val==1{ $'ddlCar option'。每个函数{ 如果$this.val！=2&&$this.val！=4{ $this.remove； } } }否则{ $'ddlCar option'。每个函数{ $this.remove； } 为carArray的var i{ $'ddlCar'.appendcarArray[i] } } }; }; -选择一个选项- 对 不 -请选择一个名称- 沃尔沃汽车 萨博 梅赛德斯 奥迪 在Edge、Chrome、Firefox和Internet Explorer 11中测试

请注意，隐藏和显示选项在Edge或IE中不起作用。需要真正删除元素

$function{ var$ddlCar=$ddlCar； var$ddlCarOptions=$ddlCar.childrenoption； $ddlOption.changefunction{ 如果$this.val==1{ $ddlCarOptions.filter.toggleable.attrselected，false.remove； }否则{ $ddlCar.empty.追加$ddlCarOptions； } }; }; -选择一个选项- 对 不 -请选择一个名称- 沃尔沃汽车 萨博 梅赛德斯 奥迪

---

为什么不基于ddlCar选项值重新绑定ddlCar下拉列表，而不是显示/隐藏某些值。选择“否”，我想查看ddlCar下拉列表的所有值。有没有什么快捷方式来显示所有，因为我有超过300个项目的ddlCardropdown@user584018这正是我的代码所做的。当选择“否”时，它将显示所有值。此行是快捷方式$ddlCar option.show；选择“否”时，我希望看到ddlCar下拉列表中的所有值。有没有什么快捷方式来显示所有，因为我有超过300个项目的ddlCardropdown@user584018对使用上面的脚本。请检查上面的链接有人请更正我的答案部分我是stackoverflow新手。

<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1">Volvo</option>
<option value="2" class="yes">Saab</option>
<option value="3">Mercedes</option>
<option value="4" class="yes">Audi</option>
</select> 

$(function() {
    $("#ddlOption").change(function() {
        var selectedValue = $(this).val();
        if (selectedValue == 1)
        {
          $("#ddlCar option").hide();
          $("#ddlCar option.yes").show();
        }
        else
        {
          $("#ddlCar option").show();
        }
    });
});

 $('#ddlOption').change(function(){
        var txt = $(this).val();
        alert(txt);
        if(txt==1){
        $('#ddlCar option[value="1"]').hide();
        $('#ddlCar option[value="3"]').hide();
        }
        else{
        $('#ddlCar option[value="1"]').show();
        $('#ddlCar option[value="3"]').show();
        }
     });

<script type="text/javascript">
function populateList() {
if($("option:selected",$("#ddlOption")).val()=="1")
{
    $(".val1").hide();
    $(".val2").show();
}
else if($("option:selected",$("#ddlOption")).val()=="2")
{
    $(".val1").show();
    $(".val2").hide();
}
else
{
    $(".val1").show();
    $(".val2").show();
}
}
</script>

<select id="ddlOption" onchange="populateList();">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1" class="val2">Volvo</option>
<option value="2" class="val1">Saab</option>
<option value="3" class="val2">Mercedes</option>
<option value="4" class="val1">Audi</option>
</select> 

$(function() {
var optionOne=[{text:"Saab",value:"2"},{text:"Audi",value:"4"}];

var optionTwo=[{text:"Volvo",value:"1"},{text:"Saab",value:"2"},{text:"Mercedes",value:"3"},{text:"Audi",value:"4"}];

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

var selectedValue=$(this).val();

$('#ddlCar').html('');

var mySelect = $('#ddlCar').append($('<option></option>').val("").html("- Please select a name -"));

if(selectedValue==='1'){
$.each(optionOne, function(index, item) {
    mySelect.append($('<option></option>').val(item.value).html(item.text));
});
}else if(selectedValue==='2'){
$.each(optionTwo, function(index, item) {
    mySelect.append($('<option></option>').val(item.value).html(item.text));
});
}else{
//To Do if no selection
}
});
});