I tried to select all options of multi-slect flower[ ] using javascript but nothing happened when I click on submit, please tell what wrong ?
<html>
<head>
<script language="javascript" type="text/javascript">
$("#submit").click(function() {
$('#flower option').each(function() {
$(this).attr('selected', true);
});
});
</script>
</head>
<body>
<form method="Get" action="#">
<select name="flower[ ]" id="flower" multiple>
<option value="flower">FLOWER</option>
<option value="rose">ROSE</option>
<option value="lilly">LILLY</option>
<option value="jasmine">JASMINE</option>
<option value="lotus">LOTUS</option>
<option value="tulips">TULIPS</option>
</select>
<input type="submit" id="submit" name="submit" value="submit">
</form>
</body>
</html>
$('#flower option').attr('selected', true);
You've already selected all of the options so the each loop is unnecessary.
You must put your javscript click function inside document ready function. Like this
$(document).ready(function(){
$("#submit").click(function(e){
$('#flower option').each(function () {
$(this).attr('selected', true);
});
});
});
Cheers.. :)
You are missing:
$(document).ready(function(){
above your script and then close it with:
});
but as mentioned above:
$('#flower option').attr('selected', true);
Should do the trick as well
You do not specify in your question, but it looks like you are using jQuery. If you do, first make sure that you have placed your code inside of a $(document).ready(function(){...}) block so that you are waiting until the DOM is ready for you to begin attaching event listeners. Also, you shouldn't need the .each(function(){...}) call. Finally, to ensure cross-browser compatibility and to conform to standards, set the selected attribute to 'selected' rather than true. See code below.
$(document).ready(function() {
$('#submit').click(function() {
$('#flower option').attr('selected', 'selected');
});
});
EDIT Actually, it's better to use jQuery's .prop() here, since using .attr() only is only to be used for setting the option's initial state. So...
$(document).ready(function() {
$('#submit').click(function() {
$('#flower option').prop('selected', true);
});
});
More info on this can be found in this question...
Jquery select all values in a multiselect dropdown
Put your javascript on the end of body or use $(document).ready(). It must be executed when form is already rendered.
You can do it with .val(). $('#flower').val(ARRAY OF VALUES), i.e.
$('#flower').val(['lilly', 'lotus']);
For selecting all you can use
$('#flower').val($('#flower option').map(function(){
return $(this).attr('value');
}));