Wie erhalte ich alle ausgewählten Werte eines Mehrfachauswahlfelds?

75

Ich habe ein <select>Element mit dem multipleAttribut. Wie kann ich die ausgewählten Werte dieses Elements mit JavaScript abrufen?

Folgendes versuche ich:

function loopSelected() { 
    var txtSelectedValuesObj = document.getElementById('txtSelectedValues');
    var selectedArray = new Array();
    var selObj = document.getElementById('slct'); 
    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;
}
javascript html drop-down-menu Tijo K Varghese
quelle
Sie hätten viel Zeit sparen können, wenn Sie in Google nach der Hälfte Ihres Titels gesucht hätten ... google.com/…
neurino
Hast du einen Code geschrieben? Damit wäre leicht zu helfen :)
Nobita

Antworten:

106

Keine jQuery:

// Return an array of the selected opion values
// select is an HTML select element
function getSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}

Kurzes Beispiel:

<select multiple>
  <option>opt 1 text
  <option value="opt 2 value">opt 2 text
</select>
<button onclick="
  var el = document.getElementsByTagName('select')[0];
  alert(getSelectValues(el));
">Show selected values</button>
RobG
quelle
1
Vielen Dank für diese Antwort. Könnten Sie es bitte für mich durchgehen? Ich glaube, ich verstehe das MEISTE davon, aber was macht var options = select && select.options;das? In meiner Unerfahrenheit erwartete ich, dass dies sein würdevar options = select.options;
TecBrat
12
selectist nicht der beste Variablenname in JavaScript.
VisioN
4
@TecBrat var options = select && select.optionsstellt sicher, dass select nicht undefiniert ist, bevor auf seine Attribute zugegriffen wird.
Qwerty
Ich denke nicht, dass die Zeile mit && viel Sinn macht ... wenn sie selectnicht definiert ist, getElementByIdwird sie zurückkehren null. In diesem Fall ist optionsnull und fehlerhaft, sobald Sie versuchen, auf die Eigenschaft length zuzugreifen. Aber vielleicht fehlt mir etwas?
Xen_mar
33

ES6

[...select.options].filter(option => option.selected).map(option => option.value)

Wo selectist ein Verweis auf das <select>Element.

Um es aufzuschlüsseln:

  • [...select.options]Nimmt die Array-ähnliche Liste von Optionen und zerstört sie, damit wir Array.prototype-Methoden verwenden können (Bearbeiten: Erwägen Sie auch die Verwendung von Array.from()).
  • filter(...) reduziert die Optionen nur auf die ausgewählten
  • map(...)konvertiert die Rohelemente <option>in ihre jeweiligen Werte
Rick Viscomi
quelle
4
Schöne funktionale Implementierung :)
Roadev
Sie könnten einfach die Methode
redu
Wenn Sie einen Verweis auf <select> erhalten können, überspringen Sie den Schritt filter () und erhalten Sie einen Verweis auf: überprüfte untergeordnete Elemente von <select> mithilfe von querySelectorAll?
Evgeny
1
@Evgeny viele Möglichkeiten, es zu lösen. Sie sollten Ihren Ansatz in einer neuen Antwort veröffentlichen.
Rick Viscomi
1
@Anentropic ist eine gute Frage, aber ich denke, Effizienz ist nicht wichtig, es sei denn, wir sprechen über Hunderte oder Tausende von Optionen.
Rick Viscomi
28

Hör zu:

HTML:

<a id="aSelect" href="#">Select</a>
<br />
<asp:ListBox ID="lstSelect" runat="server"  SelectionMode="Multiple" Width="100px">
    <asp:ListItem Text="Raj" Value="1"></asp:ListItem>
    <asp:ListItem Text="Karan" Value="2"></asp:ListItem>
    <asp:ListItem Text="Riya" Value="3"></asp:ListItem>
    <asp:ListItem Text="Aman" Value="4"></asp:ListItem>
    <asp:ListItem Text="Tom" Value="5"></asp:ListItem>
</asp:ListBox>

JQUERY:

$("#aSelect").click(function(){
    var selectedValues = [];    
    $("#lstSelect :selected").each(function(){
        selectedValues.push($(this).val()); 
    });
    alert(selectedValues);
    return false;
});

KLICKEN SIE HIER, UM DIE DEMO ZU SEHEN

Sukhjeevan
quelle
1
Kein Fan - das "HTML" ist kein HTML (lesbar, aber kein HTML), und die Antwort erfordert das Hinzufügen von JQuery als Abhängigkeit.
Iiridayn
10

Ziemlich das gleiche wie bereits vorgeschlagen, aber ein bisschen anders. Ungefähr so ​​viel Code wie jQuery in Vanilla JS :

selected = Array.prototype.filter.apply(
  select.options, [
    function(o) {
      return o.selected;
    }
  ]
);

Es scheint schneller zu sein als eine Schleife in IE, FF und Safari. Ich finde es interessant, dass es in Chrome und Opera langsamer ist.

Ein anderer Ansatz wäre die Verwendung von Selektoren:

selected = Array.prototype.map.apply(
    select.querySelectorAll('option[selected="selected"]'),
    [function (o) { return o.value; }]
);
uKolka
quelle
Ist die Funktionalität des ersten nicht bereits in Javascript enthalten?
Arlen Beiler
1
OK habe es. Aber der erste kann kürzer sein. Einfach select.selectedOptions.
Arlen Beiler
1
Das ist ein Nachteil von Bare JS im Vergleich zur Verwendung von Bibliotheken. Der Eigenschaft selectedOptions fehlt eine zuverlässige Browserunterstützung . Eine Bibliothek wie jQuery wird das vor Ihnen verbergen. Seit 2013 hat sich viel geändert, aber ein kurzer Blick auf Google zeigt, dass die Leute immer noch Probleme mit selectedOptions haben.
Großbritannien Kolka
10

Angenommen, multiSelect ist das Multiple-Select-Element. Verwenden Sie einfach die Eigenschaft selectedOptions:

//show all selected options in the console:

for ( var i = 0; i < multiSelect.selectedOptions.length; i++) {
  console.log( multiSelect.selectedOptions[i].value);
}
KAFFEECKO
quelle
Erhöhen Sie die Details zur Funktionsweise des Codes, anstatt nur Code zu veröffentlichen.
Phiter
Bitte setzen Sie kein Snippet nur für JS, es ist ohne HTML sinnlos und gibt nur Fehler
Shadow Wizard ist Ear For You
@ ShadowWizard bekam es
KAFFEECKO
Beachten Sie, dass selectedOptionsdies im IE nicht unterstützt wird. developer.mozilla.org/en-US/docs/Web/API/…
2540625
4

Hier ist eine ES6- Implementierung:

value = Array(...el.options).reduce((acc, option) => {
  if (option.selected === true) {
    acc.push(option.value);
  }
  return acc;
}, []);
To_wave
quelle
Das funktioniert super. Es ist interessant festzustellen, dass element.optionseine Live-Sammlung nicht reduziert werden kann. Es muss zuerst in ein Array konvertiert werden, wie in der obigen Antwort gezeigt.
Brandon
2

Sie können dieses Skript ausprobieren

     <!DOCTYPE html>
    <html>
    <script>
    function getMultipleSelectedValue()
    {
      var x=document.getElementById("alpha");
      for (var i = 0; i < x.options.length; i++) {
         if(x.options[i].selected ==true){
              alert(x.options[i].value);
          }
      }
    }
    </script>
    </head>
    <body>
    <select multiple="multiple" id="alpha">
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
      <option value="d">D</option>
    </select>
    <input type="button" value="Submit" onclick="getMultipleSelectedValue()"/>
    </body>
    </html>
Pankaj Chauhan
quelle
2

Sie können [].reducefür eine kompaktere Implementierung des RobG-Ansatzes Folgendes verwenden :

var getSelectedValues =  function(selectElement) {
  return [].reduce.call(selectElement.options, function(result, option) {
    if (option.selected) result.push(option.value);
    return result;
  }, []);
};
Rouan
quelle
Array.prototype.filter wäre eine bessere Option[].filter.call(ele.options, e => e.selected)
Megawac
2

Versuchen Sie , basierend auf der Antwort von Rick Viscomi , die Eigenschaft selectedOptions des HTML-Auswahlelements zu verwenden :

let txtSelectedValuesObj = document.getElementById('txtSelectedValues');
[...txtSelectedValuesObj.selectedOptions].map(option => option.value);

Im Detail,

  • selectedOptions Gibt eine Liste ausgewählter Elemente zurück.
  • Insbesondere wird eine schreibgeschützte HTMLCollection zurückgegeben, die HTMLOptionElements enthält .
  • ...ist Spread-Syntax . Es erweitert die HTMLCollectionElemente des.
  • [...]Erstellt Arrayaus diesen Elementen ein veränderbares Objekt und gibt Ihnen ein Array von HTMLOptionElements.
  • map()Ersetzt jedes HTMLObjectElementim Array (hier genannt option) durch seinen Wert ( option.value).

Dicht, aber es scheint zu funktionieren.

Achtung, selectedOptions wird vom IE nicht unterstützt !

Kevin W Matthews
quelle
2

Überprüfen Sie dies:

HTML:

<select id="test" multiple>
<option value="red" selected>Red</option>
<option value="rock" selected>Rock</option>
<option value="sun">Sun</option>
</select>

Einzeiliger Javascript-Code

Array.from(document.getElementById("test").options).filter(option => option.selected).map(option => option.value);
Krish K.
quelle
1

Wie die vorherige Antwort, jedoch mit underscore.js.

function getSelectValues(select) {
    return _.map(_.filter(select.options, function(opt) { 
        return opt.selected; }), function(opt) { 
            return opt.value || opt.text; });
}
FP frei
quelle
1

Mein Vorlagen-Helfer sieht folgendermaßen aus:

 'submit #update': function(event) {
    event.preventDefault();
    var obj_opts = event.target.tags.selectedOptions; //returns HTMLCollection
    var array_opts = Object.values(obj_opts);  //convert to array
    var stray = array_opts.map((o)=> o.text ); //to filter your bits: text, value or selected
    //do stuff
}
Steve Taylor
quelle
1

Hier gehts.

const arr = Array.from(el.features.selectedOptions) //get array from selectedOptions property
const list = [] 
arr.forEach(item => list.push(item.value)) //push each item to empty array
console.log(list)
DynamisDevelopment
quelle
0

Aufruhr js Code

this.GetOpt=()=>{

let opt=this.refs.ni;

this.logger.debug("Options length "+opt.options.length);

for(let i=0;i<=opt.options.length;i++)
{
  if(opt.options[i].selected==true)
    this.logger.debug(opt.options[i].value);
}
};

//**ni** is a name of HTML select option element as follows
//**HTML code**
<select multiple ref="ni">
  <option value="">---Select---</option>
  <option value="Option1 ">Gaming</option>
  <option value="Option2">Photoshoot</option>
</select>
Nilesh Pawar
quelle
0

Sie können das ausgewählte jquery-Plugin verwenden.

<head>
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css"
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
 <script>
        jQuery(document).ready(function(){
            jQuery(".chosen").data("placeholder","Select Frameworks...").chosen();
        });
 </script>
</head>

 <body> 
   <label for="Test" class="col-md-3 control label">Test</label>
      <select class="chosen" style="width:350px" multiple="true">
            <option>Choose...</option>
            <option>Java</option>                           
            <option>C++</option>
            <option>Python</option>
     </select>
 </body>
Hautausschläge
quelle