Jquery显示下拉菜单

jquery show dropdown from dropdown

本文关键字：下拉菜单 显示 Jquery      更新时间：2023-09-26

我正在使用一个很好的脚本，让我从'颜色'下拉菜单中选择。当我选择第一个选项时，我在其中放置了另一个"数字"下拉框。但是现在的问题是:当我在这个"数字"下拉菜单中选择一些东西时，选择菜单就消失了。我想让它留下来，并给出它自己的超链接。我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select Box</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"> </script>
 <script type="text/javascript">
 $(document).ready(function(){
 $("select").change(function(){
    $(this).find("option:selected").each(function(){
        if($(this).attr("value")=="red"){
            $(".box").not(".red").hide();
            $(".red").show();
        }
        else if($(this).attr("value")=="green"){
            $(".box").not(".green").hide();
            $(".green").show();
        }
        else if($(this).attr("value")=="blue"){
            $(".box").not(".blue").hide();
            $(".blue").show();
        }
        else{
            $(".box").hide();
        }
    });
}).change();
});
</script>
</head>
<body>
<div>
    <select>
        <option>Choose Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>
</div>
<div class="red box" style="margin-top:10px;"><select>
        <option>Choose number</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select></div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>

当select发生变化时，将触发此$("select").change(function(){事件。进行以下更改:

<select id="colorSelect">
    <option>Choose Color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>
$("#colorSelect").change(function(){

这样，它只会在颜色select改变时才会触发，而不是数字select…

如果你在数字select上触发它，if语句的这一部分将被执行:

else {
    $(".box").hide();
}

将隐藏所有的方框。

工作的例子:

 $(document).ready(function(){
 $("#colorSelect").change(function(){
    $(this).find("option:selected").each(function(){
        if($(this).attr("value")=="red"){
            $(".box").not(".red").hide();
            $(".red").show();
        }
        else if($(this).attr("value")=="green"){
            $(".box").not(".green").hide();
            $(".green").show();
        }
        else if($(this).attr("value")=="blue"){
            $(".box").not(".blue").hide();
            $(".blue").show();
        }
        else{
            $(".box").hide();
        }
    });
}).change();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select Box</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"> </script>
</head>
<body>
<div>
    <select id="colorSelect">
        <option>Choose Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>
</div>
<div class="red box" style="margin-top:10px;"><select>
        <option>Choose number</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select></div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>

相关文章：