Question

<select name="first" id="select1">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
</select>
<select name="second" id="snack">
    <option value="1">snack 1</option>
    <option value="2">snack 2 second</option>
    <option value="3">snack 3 second</option>
</select>
<select name="third" id="drink">
    <option value="1">drink 1</option>
    <option value="2">drink 2</option>
    <option value="3">drink 3 third</option>
</select>

我想在第一个下拉列表第一个和第二个选项中更改第二个或第三个下拉菜单。即，当我们选择第1项时，第二个下拉列表应该出现，当我们选择项目2时，第三个下拉列表应该会出现。

我尝试了很多东西，但无法实现。我正在寻找JavaScript解决方案

Answer 1

试试这个

$('#drink').hide();

$('#select1').on('change', function () {
    if($('#select1').val() == 1) {
        $('#snack').show();
        $('#drink').hide();
    } else {
        $('#snack').hide();
        $('#drink').show();
    }
});

jsfiddle here：http://jsfiddle.net/ewwAX/604/

Answer 2

这是Javascript解决方案：

HTML

<select name="first" id="select1" onchange="changeTime(this);">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
</select>
<select name="second" id="snack" style="display:none;">
    <option value="1">snack 1</option>
    <option value="2">snack 2 second</option>
    <option value="3">snack 3 second</option>
</select>
<select name="third" id="drink" style="display:none;">
    <option value="1">drink 1</option>
    <option value="2">drink 2</option>
    <option value="3">drink 3 third</option>
</select>

<强>使用Javascript：

function changeTime (obj)
{
  if(obj.value == 1) {
     document.getElementById('snack').style.display='block';
     document.getElementById('drink').style.display='none';
  }
  else{
   document.getElementById('drink').style.display='block';
   document.getElementById('snack').style.display='none';
  }
}

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){

        $("#snack").css({"display":"none"});            //using css function make snak & drink are hidden
        $("#drink").css({"display":"none"});            //use display property so that no effect on the layout .. no space taken by the hidden item
        $("#select1").change(function (){               // on change 
        var val = $("#select1").val();                  // of the value of select 1
        if(val == 1){                                   // if value = 1
        $("#snack").css({"display":"inline"});          // display snak
        $("#drink").css({"display":"none"});            // & hide drink
        }else if(val == 2){                             // if value = 2
        $("#snack").css({"display":"none"});            // hide snack
        $("#drink").css({"display":"inline"});          // display drink
        }else {                                         // other wise           
        $("#snack").css({"display":"none"});            // make all hidden
        $("#drink").css({"display":"none"});
        }

        });
    });
</script>
</head>
<body>

    <select name="first" id="select1">
        <option value="0" >Select Item</option>         <!-- this option added by me -- you can omit it if you want -->
        <option value="1" >Item 1</option>
        <option value="2" >Item 2</option>
    </select>

    <select name="second" id="snack">
        <option value="1">snack 1</option>
        <option value="2">snack 2 second</option>
        <option value="3">snack 3 second</option>
    </select>
    <select name="third" id="drink">
        <option value="1">drink 1</option>
        <option value="2">drink 2</option>
        <option value="3">drink 3 third</option>
    </select>

</body>

在第一个下拉选项

3 个答案: