I have the following scenario.
I have a combobox where multiple selection is available.
<select id="a" multiple="multiple">
<opti开发者_JAVA百科on value="">aaaa</option>
<option value="">bbbb</option>
<option value="">cccc</option>
<option value="">dddd</option>
</select>
Now I also have a button
<button type="button" id="display">Display</button>
When a user clicks on this button, it should list all the selected values of the dropdown in an alert box
My JS code looks as follows
$(document).ready(function() {
$('#display').click(function(){
alert($('#a').val());
});
});
Any pointers will be appreciated
You have to find all the selected options:
jQuery(function($) {
$('#display').click(function() {
$('#a > :selected').each(function() {
alert($(this).text()); // using text() here, because the
}); // options have no value..?
});
});
The manual, as Pim pointed out, is useful:
The .val() method is primarily used to get the values of form elements. In the case of
<select multiple="multiple">
elements, the.val()
method returns an array containing each selected option.
So, the above should work, but jQuery already does this behind the scenes for you, so this is much easier:
alert($('#a').val().join(", "));
If it's not working for you, it might be because of the fact that your options don't seem to have a value.
The jQuery page documenting the .val() function literally tells you what to do: http://api.jquery.com/val/
Have you tried each()?
On following demo bins, i have done stuff for above issue.
Demo: http://codebins.com/bin/4ldqp9w
HTML:
<select id="a" multiple="multiple">
<option value="">
aaaa
</option>
<option value="">
bbbb
</option>
<option value="">
cccc
</option>
<option value="">
dddd
</option>
<option value="">
eeee
</option>
<option value="">
ffff
</option>
<option value="">
gggg
</option>
</select>
<div id='result'>
</div>
<p>
<button type="button" id="display">
Display
</button>
</p>
<p>
<button type="button" id="reset">
Reset
</button>
</p>
CSS:
#a{
display:inline-block;
}
#result{
display:inline-block;
}
JQuery:
$(document).ready(function() {
$('#display').click(function() {
var result = '';
$('#a > :selected').each(function() {
result += "<div>" + $(this).text() + "</div>";
});
if (result == "") {
result = "<div>Please select any option(s)..!</div>";
}
$("#result").html(result);
});
$('#reset').click(function() {
$('#a > :selected').each(function() {
$(this).removeAttr('selected');
});
$("#result").html('');
});
});
精彩评论