У меня есть элемент <select> с атрибутом multiple.Как я могу получить выбранные значения этого элемента с помощью JavaScript?
<select>
multiple
Вот что я пытаюсь:
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; }
Мой шаблонный помощник выглядит так:
'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 }
То же, что и в предыдущем ответе, но с использованием underscore.js.
function getSelectValues(select) { return _.map(_.filter(select.options, function(opt) { return opt.selected; }), function(opt) { return opt.value || opt.text; }); }
Вот, пожалуйста.
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)
Вы можете использовать выбранный плагин jquery.
<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>
Riot 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>