在第一个下拉选项上选择第二个或第三个下拉列表

select second or third dropdown list on first dropdown option

本文关键字：下拉列表 三个 第二个 第一个 选项 选择      更新时间：2023-09-26
<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解决方案

这是Javascript的解决方案:

<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';
  }
}

试试这个

$('#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/

<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>
相关文章：