How to Create a Combo box in HTML
Combo box is used to select single option from various options. It is represented as a Drop down list in Web Browsers with one item visible at a time, drop arrow to show available values/options.
<body>
<h1>Combo box demo in HTML</h1>
<select type='select' onchange='SelChange(this)' style='color:red;font-size:2em;'>
<option value='one' name='one' >one</option>
<option value='two' name='two' >two</option>
<option value='three' name='three' selected='true'>three</option>
</select>
</body>
<h1>Combo box demo in HTML</h1>
<select type='select' onchange='SelChange(this)' style='color:red;font-size:2em;'>
<option value='one' name='one' >one</option>
<option value='two' name='two' >two</option>
<option value='three' name='three' selected='true'>three</option>
</select>
</body>
Get Selected Value in Combo box
Add Onchange event handler pass this as a parameter i.e passing combo box reference to javascript function.
add javascript code in head section or in end of the body section.
<script type='text/javascript'>
function SelChange(obj)
{
function SelChange(obj)
{
var selIndex=
obj.selectedIndex;
obj.selectedIndex;
//returns selected index range from 0 to maximum item count in Combo box.
alert('onChange'+obj.selectedIndex+"value="+obj.value);
//Get Selected value using obj.value
}
</script>
}
</script>
Tags: Html Select, Html Select single,Html Select SelectedIndex,Html Select selected value,Select OnChange event handler, html select inline style, html selection control,html single selection control.
Wow. This really made my day. Thanks a lot!
ReplyDeleteJavascript Online Training Angularjs Training in CHennai