Javascript jquery从下拉列表中显示下拉列表_Javascript_Jquery_Html_Drop Down Menu

Javascript jquery从下拉列表中显示下拉列表

javascript jquery html drop-down-menu

Javascript jquery从下拉列表中显示下拉列表,javascript,jquery,html,drop-down-menu,Javascript,Jquery,Html,Drop Down Menu,我使用了一个很好的脚本，可以从“颜色”下拉列表中进行选择。当我选择第一个选项时，我在其中放置了另一个“数字”下拉列表。但现在的问题是：当我在这个“数字”下拉菜单中选择某个东西时，selectmenu就会消失。我希望它留下来并提供自己的超链接。我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Select Box</title>

我使用了一个很好的脚本，可以从“颜色”下拉列表中进行选择。当我选择第一个选项时，我在其中放置了另一个“数字”下拉列表。但现在的问题是：当我在这个“数字”下拉菜单中选择某个东西时，selectmenu就会消失。我希望它留下来并提供自己的超链接。我的代码：

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


选择框
$（文档）.ready（函数（）{
$（“选择”）.change（函数（）{
$（this）.find（“选项：选中”）.each（函数（）{
如果（$（此）.attr（“值”）=“红色”）{
$（“.box”）.not（“.red”）.hide（）；
$（“.red”）.show（）；
}
else if（$（this.attr（“值”）=“绿色”）{
$（“.box”）.not（“.green”）.hide（）；
$（“.green”）.show（）；
}
else if（$（this.attr（“value”）=“blue”）{
$（“.box”）.not（“.blue”）.hide（）；
$（“.blue”）.show（）；
}
否则{
$（“.box”）.hide（）；
}
});
}).change（）；
});
选择颜色
红色
绿色
蓝色
选择号码
1.
2.
3.
您选择了绿色选项，所以我在这里
您选择了蓝色选项，所以我在这里

您正在触发此

$（“选择”）.change（function（）{

事件，当其中一个

select

发生更改时。进行以下更改：

<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(){

这将隐藏所有的框

工作示例：

$（文档）.ready（函数（）{
$（“#颜色选择”）.change（函数（）{
$（this）.find（“选项：选中”）.each（函数（）{
如果（$（此）.attr（“值”）=“红色”）{
$（“.box”）.not（“.red”）.hide（）；
$（“.red”）.show（）；
}
else if（$（this.attr（“值”）=“绿色”）{
$（“.box”）.not（“.green”）.hide（）；
$（“.green”）.show（）；
}
else if（$（this.attr（“value”）=“blue”）{
$（“.box”）.not（“.blue”）.hide（）；
$（“.blue”）.show（）；
}
否则{
$（“.box”）.hide（）；
}
});
}).change（）；
})；


选择框
选择颜色
红色
绿色
蓝色
选择号码
1.
2.
3.
您选择了绿色选项，所以我在这里
您选择了蓝色选项，所以我在这里

您正在触发此

$（“选择”）.change（function（）{

事件，当其中一个

select

发生更改时。进行以下更改：

<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(){

这将隐藏所有的框

工作示例：

$（文档）.ready（函数（）{
$（“#颜色选择”）.change（函数（）{
$（this）.find（“选项：选中”）.each（函数（）{
如果（$（此）.attr（“值”）=“红色”）{
$（“.box”）.not（“.red”）.hide（）；
$（“.red”）.show（）；
}
else if（$（this.attr（“值”）=“绿色”）{
$（“.box”）.not（“.green”）.hide（）；
$（“.green”）.show（）；
}
else if（$（this.attr（“value”）=“blue”）{
$（“.box”）.not（“.blue”）.hide（）；
$（“.blue”）.show（）；
}
否则{
$（“.box”）.hide（）；
}
});
}).change（）；
})；


选择框
选择颜色
红色
绿色
蓝色
选择号码
1.
2.
3.
您选择了绿色选项，所以我在这里
您选择了蓝色选项，所以我在这里