Comment obtenir toutes les valeurs sélectionnées de multiples sélectionnez boîte?

Question

Comment obtenir toutes les valeurs sélectionnées de multiples sélectionnez boîte?

j'ai un élément <select> avec l'attribut multiple . Comment puis-je obtenir les valeurs sélectionnées de cet élément en utilisant JavaScript?

voilà ce que j'essaie:

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

59

drop-down-menu html javascript

demandé sur Bugs 2011-05-03 11:01:01

13 réponses

score 82 · Answer 1

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

Rapide exemple:

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

score 28 · Answer 2

Check-it Out:

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

CLIQUEZ ICI POUR VOIR LA DÉMO

score 19 · Answer 3

ES6

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

où select est une référence à l'élément <select> .

Pour le décomposer:

[...select.options] prend la liste des options et la déstructure afin que nous puissions utiliser Array.prototypes de méthodes sur elle (éditer: envisager également d'utiliser Array.from() )
filter(...) réduit les options à ceux qui sont sélectionné
map(...) convertit les éléments bruts <option> en leurs valeurs respectives

score 10 · Answer 4

à peu près le même que déjà suggéré mais un peu différent. Environ autant de code que jQuery dans Vanilla JS :

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

Il semble être plus rapide que d'une boucle dans IE, FF et Safari. Je trouve intéressant qu'il soit plus lent dans le Chrome et L'Opéra.

une autre approche consisterait à utiliser des sélecteurs:

selected = Array.prototype.map.apply(
    select.querySelectorAll('option[selected="selected"]'),
    [function (o) { return o.value; }]
);

score 6 · Answer 5

supposons que le multi-select soit L'élément Multiple-Select, utilisez simplement sa propriété selectedOptions:

//show all selected options in the console:

for ( var i = 0; i < multiSelect.selectedOptions.length; i++) {
  console.log( multiSelect.selectedOptions[i].value);
}

score 3 · Answer 6

voici un ES6 mise en œuvre:

value = Array(...el.options).reduce((acc, option) => {
  if (option.selected === true) {
    acc.push(option.value);
  }
  return acc;
}, []);

score 2 · Answer 7

vous pouvez essayer ce script ""

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

score 2 · Answer 8

vous pouvez utiliser [].reduce pour une mise en œuvre plus compacte de approche de RobG :

var getSelectedValues =  function(selectElement) {
  return [].reduce.call(selectElement.options, function(result, option) {
    if (option.selected) result.push(option.value);
    return result;
  }, []);
};

score 1 · Answer 9

identique à la réponse précédente, mais en utilisant le soulignement.js.

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

score 1 · Answer 10

mon aide modèle ressemble à ceci:

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

score 0 · Answer 11

Riot code js

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>

score 0 · Answer 12

vous pouvez utiliser le plugin jQuery choisi .

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

score 0 · Answer 13

s'appuyant sur Rick Viscomi 's réponse, essayez d'utiliser le HTML, Sélectionnez l'Élément selectedOptions "1519140920 de la propriété":

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

en détail,

selectedOptions retourne une liste d'articles sélectionnés.

plus précisément, il renvoie une lecture seule HTMLCollection contenant HTMLOptionElements .
... est étendre la syntaxe . Il élargit les éléments du HTMLCollection .
[...] crée un objet mutable Array à partir de ces éléments, vous donnant un tableau de HTMLOptionElements .
map() remplace chaque HTMLObjectElement dans le tableau (ici appelé option ) par sa valeur ( option.value ).

Dense, mais il semble fonctionner.

Watch out", 151910920" n'est pas pris en charge par IE!

Las etiquetas más populares

Comment obtenir toutes les valeurs sélectionnées de multiples sélectionnez boîte?

13 réponses