HTML select option field is a drop down list of options, user may be allowed to choose one or more option(s) from this list.

To get selected option value , we can implement some jQuery codes on select option field. We will also see various operations that can be performed over it with the below given examples.

  • To get value of first option.
// Function to get first option.
$('#first_value').click(function() {
$("select").prop('selectedIndex', 1);
});

 

  • To get value of selected option.
// Function to get selected value
$('#selected_value').click(function() {
var value = $("#select_option option:selected").val();
//To display the selected value we used <p id="result"> tag in HTML file
$('#result').append(value);
});

 

  • To reset/clear selection of the field.
// Function to reset or clear selection
$('#reset').click(function() {
$('#select_option').val($("#select_option option[selected]").val());
});
});

 

In our example, we have created an HTML select option field and applied jQuery functions over it by clicking on three buttons.

Just watch our live demo or go through our codes and download it to use.

jQuery-select

For more understanding, our complete HTML and jQuery code is given below:

HTML File: select_operation.html

Given below our complete HTML code , copy to use it.

<!DOCTYPE html>
<html>
<head>
<title>jQuery: Common Operations On Select Tag - Demo Preview</title>
<meta name="robots" content="noindex, nofollow">
<!-- Include CSS File Here-->
<link rel="stylesheet" href="select_operation.css"/>
<!-- Include JS File Here-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="select_operation.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<h2>jQuery: Common Operations On Select Tag</h2>
<form action="">
<label>Select Option:</label>
<select id="select_option">
<option value="None" selected="selected">--Select--</option>
<option value="PHP">PHP</option>
<option value="jQuery">jQuery</option>
<option value="Javascript">Javascript</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
</select>
<input type="button" id="selected_value" value="Selected Option"/>
<input type="button" id="first_value" value="First Option"/>
<input type="button" id="reset" value="Clear Selection"/>
</form>
<p id="result"></p>
</div>
</div>
</body>
</html>

jQuery File: select_operation.js

Given below our complete jQuery code for performing common operations.

$(document).ready(function() {
// Function to get selected value.
$('#selected_value').click(function() {
$('#result').empty();
var value = $("#select_option option:selected").val();
$('#result').append(value);
});
// Function to get first option.
$('#first_value').click(function() {
$('#result').empty();
$("select").prop('selectedIndex', 1);
});
// Function to reset or clear selection.
$('#reset').click(function() {
$('#result').empty();
$('#select_option').val($("#select_option option[selected]").val());
});
});

CSS File: select_operation.css

Styling HTML Elements.

/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
div.container{
width: 960px;
height: 610px;
margin:50px auto;
font-family: 'Droid Serif', serif;
}
div.main{
width: 500px;
float:left;
padding: 30px 40px;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
text-shadow: 0 1px 0 #fff;
margin-top:100px;
}
h2{
text-align:center;
}
input[type=text]{
width: 97.7%;
height: 25px;
padding-left: 5px;
margin-bottom: 10px;
margin-top: 5px;
box-shadow: 0 0 5px;
border: 1px solid #b7b7b7;
color: #4f4f4f;
font-size: 16px;
}
p{
font-size:16px;
color:#084CA1;
}
label{
color: #464646;
font-size: 14px;
font-weight: bold;
}
input[type=button]{
font-size: 15px;
border: 1px solid gray;
padding: 5px;
background-color: #084CA1;
font-weight:bold;
border-radius: 2px;
cursor: pointer;
width:31%;
color:white;
border-radius:3px;
margin-left:6px;
font-family: 'Droid Serif', serif;
}
select{
width:100%;
height:30px;
font-size:16px;
font-family:cursive;
}

Conclusion:

This was all about some basic operations performed on select tag using jQuery.  Hope you might have liked it, keep reading our other blog posts for catching up more coding tricks.