over 9 years ago
Sometimes we need select option of a drop-down dynamically by clicking on a button or on some other action. We can do this by using "selected" property.
Example- In the below example I have a drop-down for distance and I want to select option "25 Km" on button click.
- <html>
- <head>
- <title>Demo to show div</title>
- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
- <script type="text/javascript">
- function changeValue()
- {
- $(".radius .option_25").prop("selected","selected");
- }
- </script>
- </head>
- <body>
- <button type="button" onClick="changeValue();">Change value</button>
- <select class="radius">
- <option class="option_5" value="5">5 Km</option>
- <option class="option_10" value="10">10 Km</option>
- <option class="option_15" value="15">15 Km</option>
- <option class="option_20" value="20">20 Km</option>
- <option class="option_25" value="25">25 Km</option>
- <option class="option_30" value="30">30 Km</option>
- </select>
- </body>
- </html>
<html>
<head>
<title>Demo to show div</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function changeValue()
{
$(".radius .option_25").prop("selected","selected");
}
</script>
</head>
<body>
<button type="button" onClick="changeValue();">Change value</button>
<select class="radius">
<option class="option_5" value="5">5 Km</option>
<option class="option_10" value="10">10 Km</option>
<option class="option_15" value="15">15 Km</option>
<option class="option_20" value="20">20 Km</option>
<option class="option_25" value="25">25 Km</option>
<option class="option_30" value="30">30 Km</option>
</select>
</body>
</html>
Hope this will help you :)
0 Comment(s)