使用javascript和html选择第二个选项后发出警报
[英]alert after second option is selected using javascript and html
问题描述
Good day, I am a newbie using javascript . 
美好的一天，我是使用javascript的新手。 This is how the code works: Drop drown select/option(tan) populates the second option(action) assigned . 代码就是这样工作的：溺水淹没select / option（tan）填充分配的第二个option（action）。 My problem is after second option(action) is selected the alert doesn't show... Please kindly help me. 我的问题是选择了第二个选项（操作）后，警报不显示...请帮助我。 thanks in advance 提前致谢
<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>
3 个解决方案
解决方案1
2 已采纳 2016-05-03 05:31:14
<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>
"action" value in #size select. #size选择中的“动作”值。 So dont run. 所以不要跑。 But it running now.. 但是它现在正在运行。
解决方案2
0 2016-05-03 05:29:50
Your issue is not because of any if error as suggested in the other answer . 您的问题不是由于其他答案中建议的任何if错误 。
Your issue is because the change function never triggers for the second drop down aka the one with the id #side . 您的问题是因为change函数永远不会触发第二个下拉菜单，也就是ID为#side下拉菜单。
What you need to do?
You need to add the click listener to listen to a subsequent change in the value of #size and then trigger an alert. 您需要添加click侦听器以侦听#size值的后续更改，然后触发警报。
DEMO 演示
Here is a demo of what you need to do.Feel free to add the conditions as per your requirements.The current condition works on selecting action. 这是您需要做的演示 ，可以根据需要随意添加条件，当前条件适用于选择动作。
解决方案3
0 2016-05-03 05:35:45
Please use alert() instead of window.alert(). 请使用alert（）而不是window.alert（）。
alert(5 + 6);
Please also check below 也请在下面检查
else if (val == 'test') instead of else if (val == test)
This will resolve your problem. 这样可以解决您的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.