Javascript per selezionare le opzioni multiple

Question

Ho una forma con una casella di selezione che consente più opzioni. Dopo che un utente salva queste opzioni, li memorizza in una tabella del database.

posso quindi leggere questa tabella del database per ottenere le opzioni che hanno scelto uno nuovo. Ho bisogno di essere in grado di afferrare questi dati dal database, metterlo in un array, quindi avere le opzioni in quella casella di selezione per essere pre-selezionati quando vanno a "Modifica" le loro opzioni.

Lettura dei dati in un array va bene, e so come fare una singola opzione selezionata all'interno di una casella di selezione, tuttavia non sono sicuro di come gestire le opzioni multiple di essere selezionato in javascript.

Qualcuno può aiutarmi a capire il javascript necessario per fare questo?

Answer 1

Una soluzione javascript puro

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

Anche se sono d'accordo questo lato server dovrebbe essere fatto.

Answer 2

Questo tipo di cosa dovrebbe essere fatto sul lato server, in modo da limitare la quantità di risorse utilizzate sul client per tali compiti banali. Detto questo, se si dovesse farlo sul front-end, vorrei vi incoraggio a considerare l'utilizzo di qualcosa come underscore.js per mantenere il codice pulito e conciso:

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

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

Se stai usando jQuery, potrebbe essere ancora più laconico:

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

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

Se si dovesse fare questo senza uno strumento come underscore.js o jQuery, si avrebbe un po 'di più a scrivere, e potrebbero trovare ad essere un po' più complicato:

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

Answer 3

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

Answer 4

In base a @Peter Baley risposta, ho creato una funzione più generica:

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

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

Answer 5

È possibile ottenere l'accesso alla matrice opzioni di un oggetto selezionato andando document.getElementById("cars").options dove 'cars' è l'oggetto di selezione.

Una volta che avete che è possibile chiamare option[i].setAttribute('selected', 'selected'); per selezionare un'opzione.

Sono d'accordo con ognuno altro che si sta meglio fare questo lato server però.