使用javascript和html選擇第二個選項后發出警報

Question

美好的一天，我是使用javascript的新手。 代碼就是這樣工作的：溺水淹沒select / option（tan）填充分配的第二個option（action）。 我的問題是選擇了第二個選項（操作）后，警報不顯示...請幫助我。 提前致謝

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

Answer 1

<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選擇中的“動作”值。 所以不要跑。 但是它現在正在運行。

Answer 2

您的問題不是由於其他答案中建議的任何if錯誤 。

您的問題是因為change函數永遠不會觸發第二個下拉菜單，也就是ID為#side下拉菜單。

你需要做什么？

您需要添加click偵聽器以偵聽#size值的后續更改，然后觸發警報。

演示

這是您需要做的演示，可以根據需要隨意添加條件，當前條件適用於選擇動作。

Answer 3

請使用alert（）而不是window.alert（）。

 alert(5 + 6);

也請在下面檢查

 else if (val == 'test') instead of else if (val == test)

這樣可以解決您的問題。

使用javascript和html選擇第二個選項后發出警報

問題描述

3 個解決方案

解決方案1
2 已采納 2016-05-03 05:31:14

解決方案2
0 2016-05-03 05:29:50

解決方案3
0 2016-05-03 05:35:45

使用javascript和html選擇第二個選項后發出警報

問題描述

3 個解決方案

解決方案1 2 已采納 2016-05-03 05:31:14

解決方案2 0 2016-05-03 05:29:50

解決方案3 0 2016-05-03 05:35:45

解決方案1
2 已采納 2016-05-03 05:31:14

解決方案2
0 2016-05-03 05:29:50

解決方案3
0 2016-05-03 05:35:45