使用javascript和html选择第二个选项后发出警报
alert after second option is selected using javascript and html
您好,我是一个使用javascript的新手。这就是代码的工作方式:放置淹没选择/选项(tan)填充指定的第二个选项(操作)。我的问题是,在选择第二个选项(操作)后,警报不会显示。。。请帮帮我。提前谢谢
<html>
<head><title>wahaha</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script>
$(document).ready(function ()
{
$("#type").change
(function ()
{
var val = $(this).val();
if (val == "tan")
{
$("#size").html("<select id='m'><option value='test'>nope</option><option value='action'>action</option></select>");
if (val == "action")
{
window.alert(5 + 6);
}
else if (val == test)
{
window.alert(5 + 6);
}
else{ alert("sample code"); }
}
else if (val == "-- select one --")
{
$("#size").html("<option value='test'>disney</option><option value='test2'>disneyt</option>");
}
else if (val == "green")
{
$("#size").html("<option value='test'>olive</option><option value='test2'>mantis green</option><option value='test2'>jungle green</option><option value='test'>asparagus</option>");
}
else if (val == "blue")
{
$("#size").html("<option value='test'>azure</option><option value='test2'>cerulean</option>");
}
}
);
});
</script>
</head>
<body>
<form>
<select id="type">
<option value="-- select one --">-- select one -- </option>
<option value="tan">tan</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
<select id="size">
<option value="">-SIZE -- </option>
<option value="">size </option>
</select>
<br><br>
</form>
</body>
</html>
<html>
<head><title>wahaha</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function(){
$("#type").on("change",function(){
// #type Select is selected
var val = $(this).val();
if(val == "tan")
$("#size").html("<option value='test'>nope</option><option value='action'>action</option>");
else if(val == "-- select one --")
$("#size").html("<option value='test'>disney</option><option value='test2'>disneyt</option>");
else if(val == "green")
$("#size").html("<option value='test'>olive</option><option value='test2'>mantis green</option><option value='test2'>jungle green</option><option value='test'>asparagus</option>");
else if(val == "blue")
$("#size").html("<option value='test'>azure</option><option value='test2'>cerulean</option>");
});
$("#size").change(function(){
// #size Select is selected
var val2 = $(this).val();
if(val2 == "action")
alert( 5 + 6 );
else if(val2 == "test")
alert("sample code");
});
});
</script>
</head>
<body>
<form>
<select id="type">
<option value="-- select one --">-- select one -- </option>
<option value="tan">tan</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
<select id="size">
<option value="">-SIZE -- </option>
<option value="">size </option>
</select>
<br><br>
</form>
</body>
</html>
选择#size中的"action"值。所以不要跑。但它现在正在运行。。
您的问题不是因为其他答案中建议的任何if错误。
您的问题是因为change
函数从未触发第二个下拉列表,也就是id为#side
的下拉列表。
你需要做什么?
您需要添加click
侦听器来侦听#size
值的后续更改,然后触发警报。
演示
这里有一个你需要做的演示。可以根据你的要求随意添加条件。当前条件适用于选择操作。
请使用alert()而不是window.art().
alert(5 + 6);
还请检查以下
else if (val == 'test') instead of else if (val == test)
这将解决您的问题。
相关文章:
- 设置选项对象关键点:值对以实现带第二个y轴的动态打印
- 使用javascript和html选择第二个选项后发出警报
- 使第二个选项卡处于第一个活动状态
- 两个选项卡—第一个选项卡在第二个选项卡中处于调试模式时被卡住
- Jquery插件使用第二个实例's选项
- 第一个下拉菜单可自动更改第二个下拉菜单的选项
- 获取所选项目的值,并在第二个下拉列表中更改列表
- jQuery - 添加第二个变量以选择选项字段
- 如何根据第一个<选择>选项填充第二个<选择>选项
- 引导选项卡显示事件仅在第一次触发,而不会在第二个或以后的选项卡开关上触发
- jQuery选项卡:摆脱第二个选项卡上的“上一个”导航按钮
- 第二个jQueryValidate在Bootstrap选项卡中不起作用
- 需要帮助根据用户在第一个下拉框中选择的内容创建第二个选项下拉框
- 使用javascript在第一个选择列表选项的基础上更改第二个选择列表
- 在第一个列表中显示一个li,在单击第二个列表中的另一个选项后,在单击时隐藏其余|保存第一个列表的选项
- 当第一个选项卡处于活动状态时,第二个选项卡不处于活动状态;不起作用
- 对于2个日期,我需要根据第一个日期选择来阻止第二个日期的日期选择器选项
- 使用bootstrap-select.js根据第一个下拉列表更改第二个下拉列表的选项
- 显示基于第一个选择框中选择的选项的第二个选择框
- 如果第一个下拉框中的某个选项处于选定状态,则创建第二个下拉框