wake-up-neo.net

Javascript zum Auswählen mehrerer Optionen

Ich habe ein Formular mit einer Auswahlbox, die mehrere Optionen ermöglicht. Nachdem ein Benutzer diese Optionen gespeichert hat, speichert er sie in einer Datenbanktabelle. 

Ich kann diese Datenbanktabelle dann lesen, um wieder die Optionen zu erhalten, die sie ausgewählt haben. Ich muss in der Lage sein, diese Daten aus der Datenbank zu holen, sie in ein Array zu legen und dann die Optionen in diesem Auswahlfeld vorzuwählen, wenn sie ihre Optionen unter "Bearbeiten" auswählen.

Das Lesen der Daten in ein Array ist in Ordnung, und ich weiß, wie man eine einzelne Option innerhalb eines Auswahlfelds auswählt. Ich bin jedoch nicht sicher, wie mit mehreren Optionen umzugehen ist, die in Javascript ausgewählt werden.

Kann mir jemand helfen, das dazu benötigte Javascript herauszufinden?

15
Dave Hunt

Eine reine Javascript-Lösung

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

Obwohl ich damit einverstanden bin, sollte dies serverseitig erfolgen.

17
Peter Bailey

Diese Art von Dingen sollte serverseitig ausgeführt werden, um die Menge an Ressourcen zu begrenzen, die auf dem Client für solche trivialen Aufgaben verwendet werden. Wenn Sie dies jedoch am Frontend tun, würde ich Sie dazu ermutigen, etwas wie underscore.js zu verwenden, um den Code sauber und prägnant zu halten:

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

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

Wenn Sie jQuery verwenden, könnte es noch knapper werden:

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

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

Wenn Sie dies ohne ein Tool wie underscore.js oder jQuery tun würden, hätten Sie etwas mehr zu schreiben und könnten es etwas komplizierter finden:

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

Basierend auf der Antwort von @Peter Baley habe ich eine generischere Funktion erstellt:

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

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

Sie können Zugriff auf das Options-Array eines ausgewählten Objekts erhalten, indem Sie document.getElementById("cars").options gehen, wobei 'cars' das Auswahlobjekt ist.

Sobald Sie das haben, können Sie option[i].setAttribute('selected', 'selected'); aufrufen, um eine Option auszuwählen.

Ich stimme mit jedem anderen überein, dass es Ihnen besser geht, diese Server-Seite zu nutzen.

0
PaddyDwyer