Sasuke Scend Sasuke Scend - 7 months ago 22
Javascript Question

using select id in .html for javascript


Good day,
This is how the code works:

Drop drown select/option(tan) populates the second option(yep,
nope,action) assigned .When the


  • second option(yep) is selected no assigned function.

  • second option(nope) is selected
    *** PROBLEM : I want to use the select id ="m" inside the .html but it is not recognized and it doesn't show the alert("tada!!");

  • second option(action) is selected there is an alert message which is 11.






For this line I want to the <select id='m'> but it only recognizes the (#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>");
}
I set a code for the <select id='m'> but it doesn't work is there a way to use this id inside $("#size").html?

$("#m").change(function(){
var val3 = $(this).val();
if(val3 == "action")
{
alert( 5 + 6 );
}
else if(val3 == "nope")
{
alert("tada!!");
}
});






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




Answer

Here you go, I moved the alert function to the listener that is triggered when the #size changes.

The problem?

The line of code below wasn't replacing the id of the second dropdown with m.Only the values inside were changing.

$("#size").html("<select id='m'><option value='yep'>yep</option><option value='nope'>nope</option><option value='action'>action</option></select>");

Fixed Code

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

As a matter of fact, you can actually go ahead and remove the entire function that triggers when m changes.