web-dev-qa-db-fra.com

Javascript pour sélectionner plusieurs options

J'ai un formulaire avec une boîte de sélection qui permet plusieurs options. Une fois que l'utilisateur a enregistré ces options, il les stocke dans une table de base de données. 

Je peux ensuite lire cette table de base de données pour récupérer les options qu’ils ont choisies. Je dois pouvoir récupérer ces données dans la base de données, les mettre dans un tableau, puis avoir les options de cette zone de sélection pour être présélectionnées lorsqu'elles vont dans "Modifier" leurs options.

Lire les données dans un tableau me convient, et je sais comment créer une seule option dans une zone de sélection, mais je ne suis pas sûr de savoir comment gérer plusieurs options sélectionnées en javascript.

Quelqu'un peut-il m'aider à comprendre le javascript requis pour le faire?

javascriptformshtml-selectoptions
15
Dave Hunt

Une solution javascript pure

<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>

Bien que je convienne, cela devrait être fait côté serveur.

17
Peter Bailey

Ce type de tâche doit être effectué côté serveur, de manière à limiter la quantité de ressources utilisées sur le client pour des tâches aussi triviales. Cela étant dit, si vous deviez le faire au début, je vous encouragerais à utiliser quelque chose comme underscore.js pour que le code soit propre et concis:

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

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

Si vous utilisez jQuery, cela pourrait être encore plus concis:

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

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

Si vous deviez le faire sans un outil tel que underscore.js ou jQuery, vous auriez un peu plus d'écriture et le trouverait peut-être un peu plus compliqué:

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;
    }
}
3
Sampson

Basé sur la réponse de @Peter Baley, j'ai créé une fonction plus générique:

   @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;
          }
        }
    }

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

0
Cedric Simon
<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>
0
Avinash

Vous pouvez accéder au tableau d'options d'un objet sélectionné en allant à document.getElementById("cars").options où 'cars' est l'objet sélectionné.

Une fois que vous avez cela, vous pouvez appeler option[i].setAttribute('selected', 'selected'); pour sélectionner une option.

Je suis d'accord avec tout le monde qu'il vaut mieux faire ce côté serveur si.

0
PaddyDwyer