Hello Reader's if you are looing to develop the html form which changes the data on changing the values in option box, then in this blog you can see how it is done.
To making this form we will start from html file. And its code will go like this:-
<!DOCTYPE html>
<body>
<div class="container">
<div class="main">
<label>Now Choose Country:</label>
<div id="prm">
<select id="Country_Name">
<option>--Now Choose--</option>
<option>India</option>
<option>Nepal</option>
<option>FRANCE</option>
</select>
<label>Now select the city_name:</label>
<select id="city_name">
</select>
</div>
</div>
</div>
</body>
</html>
Now see how to make the script the code. The jquery for on change the function will detect the changed value from option box and pass the key id as param. Now everytime user changes the coutnry name a key will pass through $(document).ready(function(). Now on basis of the Country_Name name it will look up with My_arrayay dictionary. If any result found then it will revert all the values to parent function.
$(document).ready(function() {
// Initializing My_arrayays with city_name names.
var India = [{
display: "New Delhi",value: "New_Delhi"},
{display: "Panjab", value: "Panjab"},
{display: "Goa",value: "Goa"}];
var Nepal = [{
display: "Kathmandu",value: "Kathmandu"},
{display: "Korm",value: "Korm"}];
var FRANCE = [{
display: "Paris",value: "Paris"},
{display: "Avignon",value: "Avignon"},
{ display: "Strasbourg",value: "Strasbourg"},
{display: "Nice", value: "Nice"}];
// Function executes on change of first select option field.
$("#Country_Name").change(function() {
var select = $("#Country_Name option:selected").val();
switch (select) {
case "India":
city_name(India);
break;
case "Nepal":
city_name(Nepal);
break;
case "FRANCE":
city_name(FRANCE);
break;
default:
$("#city_name").empty();
$("#city_name").append("<option>--Now Choose--</option>");
break;
}
});
function city_name(My_array) {
$("#city_name").empty();
$("#city_name").append("<option>--Now Choose--</option>");
$(My_array).each(function(i) {
$("#city_name").append("<option value=\"" + My_array[i].value + "\">" + My_array[i].display + "</option>")
});
}
});
Now in the code script code the function 'function city_name(My_array)' is getting the result from My_arrayay. And by using the JQuery selectors we will append the result in option tag. Now the new options generated by jquery will show in second option box. And everytime this is re My_arrayange the results based on user data selection.
Just make sure you have included the latest jquery file in header.
0 Comment(s)