Link to home
Start Free TrialLog in
Avatar of help-is-needed
help-is-needed

asked on

using javascript to select multiple combobox options

Hi,

I would like to embed some js on a page that will prepopulate a combo box with two selected options.

How is this done in js?

I have it so that it does one...

populateTest();
                                                                 function populateTest() {
                                                                     var option1 = document.getElementById("testElement");
                                                                     option1 .value = '1';
                                                                 }
Avatar of Eyal
Eyal
Flag of Israel image

do you have jQuery in that page?
Avatar of help-is-needed
help-is-needed

ASKER

I can use Jquery yes.
Im using a <select multiple="multiple"><option></option></select> box
<select multiple="multiple"><option>1</option><option>2</option></select>
<select id='sel' multiple size='10'>
Avatar of Kiran Sonawane
Check below code

Demo: http://jsfiddle.net/qFfG8/1/
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Kiran Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){
 
    populateTest();
});




function populateTest()
{
$("#testElement").html("<option value='1'>Option 1</option><option value='2'>Option 2</option>")  ;
    
}


  
</script>
</head>

<body>

<select id="testElement" multiple="multiple"></select>

</body>

</html>

Open in new window

Erm, I think I may not have got my issue across clearly.

I have an option list on my html page. example:

<select multiple="multiple" size="5" id="testOptions">
                                                    <option selected="selected" value="">please select</option>
                                                    <option value="test1">help</option>
                                                    <option value="test2">is</option>
                                                    <option value="test3">needed</option>
                                                    <option value="test4">please</option>
                                                    <option value="test5">thanks</option>
                                                </select>

What I would like to do is to pre-select two of the options when the page loads.
I currently have it working so that it can default select one of the options but I need to be able to default select two options.

populateTest();
                                                                 function populateTest() {
                                                                     var option1 = document.getElementById("testOptions");
                                                                     option1.value = 'test2';
                                                                 }
ASKER CERTIFIED SOLUTION
Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
var maxSel = 5;
var selected =[];
window.onload=function() {
  saveSel(document.getElementById('sel')); // initialise
}
function saveSel(sel) {
  for (var i=0;i<sel.options.length-4;i++) {
    sel.options[i].selected=true; 
  }
}

<select id='sel' multiple onChange="test(this)" size='10'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
<option value='4'>Four</option>
<option value='5'>Five</option>
<option value='5'>Six</option>
</select>

Open in new window

sonawanekiran, thats it.
How do I use that same code to deselect?

many thanks
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial