In this tutorial with the help of an example we will trying to explain how to validate a select box in Java Script.
Select Box Validation in JavaScript
In this section we will discuss about select box validation in JavaScript. Select box allows you to create drop down list and option tag inside the select tag is for available option in the list. The select tag is useful when you have to get the user input from the available options. HTML select Box having same functionality as HTML Checkbox Fields. Select Box allow user to select one or more values from available option. Incorporating a select field into web page is done by <select> tag. And list values are then added to the field using the <option> tag. By default, select box are called drop down down list. Allow only to select single value.
Example : How to Create Select Box:
<select> <option value="Delhi">Delhi</option> <option value="Bangalore">Bangalore</option> <option value="Mumbai">Mumbai</option> <option value="Jaipur">Jaipur</option> </select>
Example : Using this example we have created one JavaScript in which one select box is created name "select your city" in which four option is available. The validation in the select box is, if the user does not select any available option then alert box will display a message that "Please select the city" and if you select one of the city, then it will display the name of the city in alert box. Now, here is the code as follows:
<html>
<script language="Javascript">
function validate()
{
if(document.form.city.selectedIndex=="")
{
alert ( "Please select city!");
return false;
}
var sel = document.getElementById("city");
//get the selected option
var selectedText = sel.options[sel.selectedIndex].text;
alert("You have selected : "+selectedText);
return true;
}
</script>
<form name="form" method="post" onSubmit="return validate()"><pre>
Select your City <select name="city" id="city">
<option value="Select">Select</option>
<option value="Delhi">Delhi</option>
<option value="Jaipur">Jaipur</option>
<option value="Agra">Agra</option>
<option value="Bangalore">Bangalore</option>
<option value="Pune">Pune</option>
</select>
<input type="submit" name="Submit" value="Submit">
</pre></form>
</html>
After executing the program the output will be as follows:
When you select one of the option then the output is as follows:
