I have select box with multiple dynamic values. How do I handle the value of select box, Please suggest way to optimize Jquery.
HTML:
<select name="alphabet">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
Jquery:
var alphabet = "B";
if (alphabet == "A") {
$('select[name^="alphabet"] option[value="A"]').attr("selected", "selected");
} else if (alphabet == "B") {
$('select[name^="alphabet"] option[value="B"]').attr("selected", "selected");
} else if (alphabet == "C") {
$('select[name^="alphabet"] option[value="C"]').attr("selected", "selected");
}
http://jsfiddle.net/ysaa4uyc/2/
Thanks.
http://jsfiddle.net/ysaa4uyc/4/
$('select[name^="alphabet"] option[value='+alphabet+']').attr("selected", "selected");
By you're example, if you want your jQuery to be more modular to allow for as many or as little values as you want then you can do it based on the variable.
$(document).ready(function() { var letters = 'ABCDE'; var random = Math.round(Math.random() * 5) + 1; var letter = letters.substring(random - 1, random); $('select[name^="alphabet"] option[value="' + letter + '"]').attr("selected", "selected"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="alphabet"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select>
The main line is:
$('select[name^="alphabet"] option[value="' + letter + '"]').attr("selected", "selected");
This does a dynamic input based on your variable, or in my example based on the output of variable letter
.
If you want to find out the current selected value, you can do a look up on the select change()
.
$(document).ready(function() { $('select[name^="alphabet"]').change(function() { var value = $(this).find(':selected').val(); $('.output').text(value); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="alphabet"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> <div>Value: <span class="output"></span> </div>
Add an id to the select box (having name attribute is not mandatory)
<select id="alphabet" name="alphabet">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
If you are expecting for multiple selection of values, use 'multiple' attribute in the select box
<select id="alphabet" multiple>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
Using id of the select box, selected value can be taken as
$('select[id=alphabet]').val();
You can test the selected value using any event on the select box like
$('select[id=alphabet]').change(function() {
alert($('select[id=alphabet]').val());
});
Above code will work for both single/multiple selection of values.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.