Question

我有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">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>

当用户选择＆＃34;是＆＃34;来自＆＃34; ddlOption＆＃34;下拉，然后我想只显示2个值（萨博和奥迪）下拉＆＃34; ddlCar＆＃34;当用户选择＆＃34; No＆＃34;时，我希望看到＆＃34; ddlCar＆＃34;的所有值。下拉列表。

请建议我使用Jquery代码的任何可能性。谢谢！

Answer 1

<强> jsFiddle example

$("#ddlOption").change(function() {
    $("#ddlCar").val("").find("[value=1], [value=3]").toggle( this.value==="2" );
});

$("#ddlOption").change(function() {
  $("#ddlCar").val("").find("[value=1], [value=3]").toggle( this.value==="2" );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">Saab</option>
  <option value="3">Mercedes</option>
  <option value="4">Audi</option>
</select>

通过检查布尔第一个选择的值（option）

来切换所需的this.value==="2"元素

此外，请重置为.val("")，以确保从可能的之前的更改中正确清除第二个选择值。

Answer 2

 $('#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();
        }
     });

小提琴

http://jsfiddle.net/ue4Cm/38/

Answer 3

检查已更新 fiddle

在您的标记中，您需要先向下拉值添加类

<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>

现在在你的jquery代码中

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

Answer 4

在Edge，Chrome，Firefox和Internet Explorer 11中进行了测试

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

＆＃13;

$(function() {

  var $ddlCar = $("#ddlCar");
  var $ddlCarOptions = $ddlCar.children("option");

  $("#ddlOption").change(function() {
    if ($(this).val() === "1") {
      $ddlCarOptions.filter(".toggleable").attr("selected", false).remove();
    } else {
      $ddlCar.empty().append($ddlCarOptions);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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 class="toggleable" value="1">Volvo</option>
  <option value="2">Saab</option>
  <option class="toggleable" value="3">Mercedes</option>
  <option value="4">Audi</option>
</select>

＆＃13;

Answer 5

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

<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>

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

Answer 6

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

Updated Js fiddle link

$(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
}
});
});

Answer 7

试试这个：https://jsfiddle.net/oqsf7gjq/17/不是最干净的解决方案，但它可以进行交叉浏览。

＆＃13;

delegate

＆＃13;

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    confirmViewController *destViewController = (confirmViewController *)segue.destinationViewController;
    destViewController.delegate=self;
}

＆＃13;

下拉值隐藏显示

7 个答案: