Sasuke Scend Sasuke Scend - 7 months ago 12
HTML Question

alert after second option is selected using javascript and html

Good day, I am a newbie using javascript .
This is how the code works: Drop drown select/option(tan) populates the second option(action) assigned . 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>



Answer
<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. So dont run. But it running now..

Comments