JQuery: How to check multiselect

Hi!
How can I check that at least one value should be selected in MULTISELECT listbox through JQUERY.

Thanks in advance


function validateMultipleSelect(select) {
    var hasSelection = false;
    var i;
    for (i = 0; i < select.options.length; i += 1) {
        if (select.options[i].selected) {
            hasSelection = true;
        }
    }
    return hasSelection;
}

Ahh, but it’s jQuery that you’re asking about. That gets more interesting.

The :selected selector returns a separate option for each one that’s selected.
http://docs.jquery.com/Selectors/selected


<select name="garden" multiple>
	<option>Flowers</option>
	<option selected="selected">Shrubs</option>
	<option>Trees</option>
	<option selected="selected">Bushes</option>
	<option>Grass</option>
	<option>Dirt</option>
</select>


alert($('select[name=garden] option:selected').size()) // 2

Thanks for guidance, it always popups ‘0’, even I select one or more records from listbox.

My code is : alert(jQuery(‘select[name=^zonelocation] option:selected’).size());

What Iam doing wrong?

Thanks in advance

What does the Select look like, and how are you performing the check?

My multiselect listbox name is “zonelocation” .

Please provide me with something that I can use to test the code with.
If I’m using my own html select code and you’re using your own select code, and mine works and your doesn’t, then it’s obvious that something needs to be fixed.

So please, provide me with the html select code along with the options, and please also provide some information on how we get from submitting the form to performing the javascript check that is retuning 0 for the number of selected options.

As an example, here is some code showing the technique working as it properly should.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Test</title>
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"> </script>
	<script>
	$(function () {
		$('#myForm').submit(function () {
			var isValid = true;
			var form = this;
			isValid = isValid && validateMultipleSelect($('select[name^=zonelocation]', form));
			return isValid;
		});
	});
	function validateMultipleSelect(select) {
		var number = $('option:selected', select).size();
		alert(number);
		return (number > 0);
	}
	</script>
</head>
<body>
<form id="myForm">
	<select name="zonelocation[]" multiple>
		<option>Flowers</option>
		<option selected="selected">Shrubs</option>
		<option>Trees</option>
		<option selected="selected">Bushes</option>
		<option>Grass</option>
		<option>Dirt</option>
	</select>
	<input type="submit">
</form>
</body>
</html>

Hi!
This line of your code really worked for me.

jQuery(‘option:selected’, ‘select[name^=zonelocation]’).size();

You are really JQuery mentor.

Thanks a lot for your great guidance with patience for my novice replies.

Your attempt here was correct except for a syntax error.


jQuery('select[name[B][COLOR="Red"]=^[/COLOR][/B]zonelocation] option:selected').size()

^= is correct
=^ is what you used