Javascript to Select Multiple options [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 4 years ago.

Improve this question

I have a form with a select box that allows multiple options. After a user saves these options, it stores them in a database table.

I can then read this database table to get the options they chose one again. I need to be able to grab this data from the database, put it into an array, then have the options in that select box to be pre-selected when they go to "Edit" their options.

Reading the data into an array is fine, and I know how to make a single option selected within a select box, however I'm not sure how to handle multiple options being selected in javascript.

Can someone help me figure out the javascript required to do this?

Peter Bailey · Accepted Answer · 2009-08-18 22:50:36Z

37

A pure javascript solution

<select id="choice" multiple="multiple">
  <option value="1">One</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<script type="text/javascript">

var optionsToSelect = ['One', 'three'];
var select = document.getElementById( 'choice' );

for ( var i = 0, l = select.options.length, o; i < l; i++ )
{
  o = select.options[i];
  if ( optionsToSelect.indexOf( o.text ) != -1 )
  {
    o.selected = true;
  }
}

</script>

Although I agree this should be done server-side.

edited Aug 18, 2009 at 22:50

answered Aug 18, 2009 at 19:44

Peter Bailey

106k32 gold badges186 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dave Hunt Over a year ago

This is close, however the values stored are not the "index" of the options, they are the values of the options.

Sampson Over a year ago

It's worth noting Array.prototoype.indexOf wasn't available in IE until version 9.

Cedric Simon Over a year ago

Thanks a lot. I will use it with o.value instead of o.text but it works well

utdev Over a year ago

Hi could you explain your loop a little more I don't quite get it

utdev Over a year ago

Could you post a jsfiddle please, I think I do the same but it won't work

Sampson · Accepted Answer · 2013-04-29 05:32:35Z

5

This type of thing should be done server-side, so as to limit the amount of resources used on the client for such trivial tasks. That being said, if you were to do it on the front-end, I would encourage you to consider using something like underscore.js to keep the code clean and concise:

var values = ["Red", "Green"],
    colors = document.getElementById("colors");

_.each(colors.options, function (option) {
    option.selected = ~_.indexOf(values, option.text);
});

If you're using jQuery, it could be even more terse:

var values = ["Red", "Green"];

$("#colors option").prop("selected", function () {
    return ~$.inArray(this.text, values);
});

If you were to do this without a tool like underscore.js or jQuery, you would have a bit more to write, and may find it to be a bit more complicated:

var color, i, j,
    values = ["Red", "Green"],
    options = document.getElementById("colors").options;

for ( i = 0; i < values.length; i++ ) {
    for ( j = 0, color = values[i]; j < options.length; j++ ) {
        options[j].selected = options[j].selected || color === options[j].text;
    }
}

edited Apr 29, 2013 at 5:32

answered Aug 18, 2009 at 19:27

Sampson

269k76 gold badges546 silver badges570 bronze badges

5 Comments

Dave Hunt Over a year ago

I already have the select form, I was looking more for a javascript solution to the auto select. Every other part of the form uses javascript, I'm just not sure how to select multiple options with the javascript code.

Residuum Over a year ago

Doing it server-side makes more sense, and you will still end up generating an array server-side for the client-side code.

Dave Hunt Over a year ago

Server side does make more sense, but I don't want to redo everything thats already done. The previous developer used all javascript, so I'm just going to stick with it for this.

Chris Moschini Over a year ago

The JS here can be simplified, and there's a bug - the HTML values are capitalized while the chosen variable is not, meaning this code won't select anything. Fixed version: jsfiddle.net/b9chris/RZT72

Sampson Over a year ago

@ChrisMoschini This answer is many years old, but I'm happy to brought it to the surface again so I could refresh its content. Nice solution as well, though you can make it even shorter :) See my answer above.

Musakkhir Sayyed · Accepted Answer · 2017-10-26 06:56:15Z

1

You can get access to the options array of a selected object by going document.getElementById("cars").options where 'cars' is the select object.

Once you have that you can call option[i].setAttribute('selected', 'selected'); to select an option.

I agree with every one else that you are better off doing this server side though.

edited Oct 26, 2017 at 6:56

Musakkhir Sayyed

7,21813 gold badges44 silver badges67 bronze badges

answered Aug 18, 2009 at 19:48

PaddyDwyer

4753 silver badges9 bronze badges

Comments

Marcel Korpel · Accepted Answer · 2010-09-02 17:46:35Z

<script language="JavaScript" type="text/javascript">
<!--
function loopSelected()
{
  var txtSelectedValuesObj = document.getElementById('txtSelectedValues');
  var selectedArray = new Array();
  var selObj = document.getElementById('selSeaShells');
  var i;
  var count = 0;
  for (i=0; i<selObj.options.length; i++) {
    if (selObj.options[i].selected) {
      selectedArray[count] = selObj.options[i].value;
      count++;
    }
  }
  txtSelectedValuesObj.value = selectedArray;
}
function openInNewWindow(frm)
{
  // open a blank window
  var aWindow = window.open('', 'Tutorial004NewWindow',
   'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');

  // set the target to the blank window
  frm.target = 'Tutorial004NewWindow';

  // submit
  frm.submit();
}
//-->
</script>
The HTML
<form action="tutorial004_nw.html" method="get">
  <table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <td valign="top">
      <input type="button" value="Submit" onclick="openInNewWindow(this.form);" />
      <input type="button" value="Loop Selected" onclick="loopSelected();" />
      <br />
      <select name="selSea" id="selSeaShells" size="5" multiple="multiple">
        <option value="val0" selected>sea zero</option>
        <option value="val1">sea one</option>
        <option value="val2">sea two</option>
        <option value="val3">sea three</option>
        <option value="val4">sea four</option>
      </select>
    </td>
    <td valign="top">
      <input type="text" id="txtSelectedValues" />
      selected array
    </td>
  </tr>
  </table>
</form>

Cedric Simon · Accepted Answer · 2017-02-17 18:31:44Z

0

Based on @Peter Baley answer, I created a more generic function:

   @objectId: HTML object ID
   @values: can be a string or an array. String is less "secure" (should not contain repeated value).
   function checkMultiValues(objectId, values){
        selectMultiObject=document.getElementById(objectId);
        for ( var i = 0, l = selectMultiObject.options.length, o; i < l; i++ )
        {
          o = selectMultiObject.options[i];
          if ( values.indexOf( o.value ) != -1 )
          {
            o.selected = true;
          } else {
            o.selected = false;
          }
        }
    }

Example: checkMultiValues('thisMultiHTMLObject','a,b,c,d');

answered Feb 17, 2017 at 18:31

Cedric Simon

4,6694 gold badges43 silver badges53 bronze badges

1 Comment

NikxDa Over a year ago

o.selected = (values.indexOf (o.value) != -1) will make the if-block obsolete.

Collectives™ on Stack Overflow

Javascript to Select Multiple options [closed]

5 Answers 5

5 Comments

5 Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

5 Comments

Comments

Comments

1 Comment

Linked

Related