JavaScript Dropdown OnChange Another Dropdown
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this tutorial we will show you the solution of JavaScript dropdown onchange another dropdown, here we defined two select fields with respective options then using jquery we defined another set of options for second select element.
Then we selecting first select element option respective row value we defined for second select element options we are appends on select element so it will dynamically get changed.
Step By Step Guide On JavaScript Dropdown OnChange Another Dropdown :-
Here we defined two select tags with different id’s ‘first,first_sel’. In select element ‘first’ we defined options ‘1,2,3’ but for select element ‘first_sel’ had no options.
In script we defining three set of array values ‘dd1’ for appends on select element ‘first_sel’ and when user click on this select element initial set of options ‘['four','five','six']’of key ‘1’ values displayed.
If they select dropdown ‘first’ then respective value of key values for dropdown ‘first_sel’ also changed respectively appends on select element.
<!DOCTYPE html>
<html>
<head>
<title>DROP DOWN ON CHANGE</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<select name="" id="first">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="" id="first_sel"></select>
<script>
$(document).ready(function(){
var dd1={
1:['four','five','six'],
2:['seven','eight','nine'],
3:['ten','eleven','twelve']
}
$('#first_sel').html(
'<option>'+dd1[1].join('</option><option>')+'</option>'
);
$('#first').on('change',function(){
$('#first_sel').html(
'<option>'+dd1[$(this).val()].join('</option><option>')+'</option>'
);
});
});
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined two select elements in id ‘first’ select element we defined with options ‘1,2,3’ and id ‘first_sel’ select element defined without options because we needs append options dynamically.
- In script we defined variable ‘dd1’ it holds array of objects within that we defined three keys it is same as first select values ‘1,2,3’ then for each key we defined three array string values ‘['four','five','six'], ['seven','eight','nine'], ['ten','eleven','twelve']’.
- Initially we appending key ‘1’ array values on second select element as options then user changing any other options on ‘first’ select elements we needs to change ‘first_sel’ dropdown options to respective row array values. So it will dynamically changed.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to do onchange dropdown with another dropdown using javascript.
When we executing this program on browser we can see two dropdown list user needs to select any options from first dropdown respectively second dropdown will gets updated respectively.
Here we used jquery so you have confirm one thing this program needs internet connection then only we can see the dynamic changes on second dropdown list.
I hope this tutorial on JavaScript dropdown onchange another dropdown helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
