Get Selected Value in DropDown JQuery
This example explains how to get selected value in Html Combo Box/Drop Down/Select control( Single item) using JQUERY.
First add JQUERY script file reference
or Download fron jquery.com
Once user adds jquery .js file , then add select control with the following options
Choice select has 3 options
1.One
2.Two
3.Three
User can select at most one value. i.e Single value selection.
<select style='color:red;font-size:1.2em;' id='selectone' size="2" >
<option value='one' onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">one</option>
<option value='two' onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">two</option>
<option value='three' selected="selected" onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">three</option>
</select>
<option value='one' onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">one</option>
<option value='two' onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">two</option>
<option value='three' selected="selected" onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">three</option>
</select>
Size = 1 or 2 or 3 , 1 means 1 item will be visible
2 means 2 items visible at a time.
Whenever selection changes in drop down , change Event will be fired.
and on document load complete of jquery try to access Select OnChange event handler.
Here is the Jquery Script
<script type='text/javascript'>
function OnSelectedValue()
{
alert($('#selectone').val());
}
$("document").ready(function () {
$('#selectone').change(function () {
alert('sel');
alert($('#selectone').val());
});
});
</script>
function OnSelectedValue()
{
alert($('#selectone').val());
}
$("document").ready(function () {
$('#selectone').change(function () {
alert('sel');
alert($('#selectone').val());
});
});
</script>
User can add Button control, On Button Click event you can access Drop Down List value
function OnSelectedValue()
{
alert($('#selectone').val());
}
{
alert($('#selectone').val());
}
<input type='button' value='Get Drop Down Value' onclick='javascript:OnSelectedValue()'/>
Here is the Complete Source Code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery-1.7.1.min.js"></script>
<script type='text/javascript'>
function OnSelectedValue()
{
alert($('#selectone').val());
}
$("document").ready(function () {
$('#selectone').change(function () {
alert('sel');
alert($('#selectone').val());
});
});
</script>
</head>
<body>
<h3 style="color:maroon">How to access HTML drop down using JQUERY.</h3>
<select style='color:red;font-size:1.2em;' id='selectone' size="2" >
<option value='one' onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">one</option>
<option value='two' onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">two</option>
<option value='three' selected="selected" onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">three</option>
</select>
<input type='button' value='Get Drop Down Value'
onclick='javascript:OnSelectedValue()'/>
</body>
</html>
<head>
<title></title>
<script src="../Scripts/jquery-1.7.1.min.js"></script>
<script type='text/javascript'>
function OnSelectedValue()
{
alert($('#selectone').val());
}
$("document").ready(function () {
$('#selectone').change(function () {
alert('sel');
alert($('#selectone').val());
});
});
</script>
</head>
<body>
<h3 style="color:maroon">How to access HTML drop down using JQUERY.</h3>
<select style='color:red;font-size:1.2em;' id='selectone' size="2" >
<option value='one' onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">one</option>
<option value='two' onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">two</option>
<option value='three' selected="selected" onmouseover ="this.style.color='red'" onmouseout="this.style.color='black'">three</option>
</select>
<input type='button' value='Get Drop Down Value'
onclick='javascript:OnSelectedValue()'/>
</body>
</html>
OUTPUT:
Note: onmouseover , onmouseout u can remove if u don't want.
Tags: How to access Drop Down value using JQUERY, How to access HTML Combo box using Jquery, How to access HTML Select control value using JQUERY, Get Drop Down value using JQUERY.
Thanks for sharing such a great blog Keep posting..
ReplyDeleteJavascript Training in Delhi