美好的一天，这就是代码的工作原理:
Drop drown select/option(tan) 填充分配的第二个选项(是的，不，操作)。当
- 选择第二个选项(是的)，但未分配功能。
- 选择了第二个选项(没有)
问题:我想使用选择 id ="m"里面.html但它未被识别，并且不显示 alert("tada!!") ;
- 选择第二个选项(操作)时会出现一条警报消息，即 11。
对于这一行，我想要 <select id='m'>但它只识别 ( #size )。
if(val == "tan") {
$("#size").html("<select id='m'><option value='yep'>yep</option><option value='nope'>nope</option><option value='action'>action</option></select>");
}
我设置了一个代码，但它不起作用有没有办法在 $("#size").html 中使用这个 id ？
$("#m").change(function(){
var val3 = $(this).val();
if(val3 == "action") {
alert( 5 + 6 );
} else if(val3 == "nope") {
alert("tada!!");
}
});
请帮助我。提前致谢
<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("<select id='m'><option value='yep'>yep</option><option value='nope'>nope</option><option value='action'>action</option></select>");
}
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");
}
});
$("#m").change(function(){
var val3 = $(this).val();
if(val3 == "action")
{
alert( 5 + 6 );
}
else if(val3 == "nope")
{
alert("tada!!");
}
});
});
</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 更改时触发的监听器。
The problem?
下面的代码行并未将第二个下拉列表的 id 替换为 m。仅其中的值发生了变化。
$("#size").html("<select id='m'><option value='yep'>yep</option><option value='nope'>nope</option><option value='action'>action</option></select>");
固定代码
<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("<select id='m'><option value='yep'>yep</option><option value='nope'>nope</option><option value='action'>action</option></select>");
}
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");
}
else if(val2 == "nope")
{
alert("tada!!");
}
});
$("#m").change(function(){
var val3 = $(this).val();
if(val3 == "action")
{
alert( 5 + 6 );
}
});
});
</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>事实上，您实际上可以继续删除 m 更改时触发的整个函数。
关于javascript - 在 .html 中为 javascript 使用选择 id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37018190/