반응형
다중 선택 상자의 모든 선택된 값을 얻는 방법은 무엇입니까?
속성 이있는 <select>요소가 multiple있습니다. JavaScript를 사용하여이 요소의 선택된 값을 어떻게 얻을 수 있습니까?
내가 시도하는 것은 다음과 같습니다.
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;
}
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;
}
빠른 예 :
<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>
확인 해봐:
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;
});
ES6
[...select.options].filter(option => option.selected).map(option => option.value)
요소에 select대한 참조는 어디에 있습니까 <select>?
분석하려면 :
[...select.options]Array와 유사한 옵션 목록을 가져 와서 Array.prototype 메서드를 사용할 수 있도록 구조화합니다 (편집 : 사용 고려Array.from()).filter(...)선택한 옵션으로 만 옵션을 줄입니다.map(...)원시<option>요소를 각각의 값으로 변환 합니다.
이미 제안한 것과 거의 동일하지만 약간 다릅니다. Vanilla JS의 jQuery만큼 많은 코드 :
selected = Array.prototype.filter.apply(
select.options, [
function(o) {
return o.selected;
}
]
);
더 빠른 것 같다 IE, FF와 Safari에서 루프보다. Chrome과 Opera에서 속도가 느리다는 것이 흥미 롭습니다.
또 다른 접근 방식은 선택기를 사용하는 것입니다.
selected = Array.prototype.map.apply(
select.querySelectorAll('option[selected="selected"]'),
[function (o) { return o.value; }]
);
multiSelect가 Multiple-Select-Element라고 가정하고 selectedOptions 속성을 사용하면됩니다.
//show all selected options in the console:
for ( var i = 0; i < multiSelect.selectedOptions.length; i++) {
console.log( multiSelect.selectedOptions[i].value);
}
다음은 ES6 구현입니다.
value = Array(...el.options).reduce((acc, option) => {
if (option.selected === true) {
acc.push(option.value);
}
return acc;
}, []);
이 스크립트를 시도 할 수 있습니다.
<!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>
RobG의 접근 방식을[].reduce 보다 간결하게 구현하는 데 사용할 수 있습니다 .
var getSelectedValues = function(selectElement) {
return [].reduce.call(selectElement.options, function(result, option) {
if (option.selected) result.push(option.value);
return result;
}, []);
};
바탕 릭 Viscomi 의 대답은 HTML 요소 선택의 사용하려고 selectedOptions의 속성을 :
let txtSelectedValuesObj = document.getElementById('txtSelectedValues');
[...txtSelectedValuesObj.selectedOptions].map(option => option.value);
상세히,
selectedOptions선택한 항목의 목록을 반환합니다.- 특히 HTMLOptionElements를 포함 하는 읽기 전용 HTMLCollection 을 반환합니다 .
...is spread syntax. It expands theHTMLCollection's elements.[...]creates a mutableArrayobject from these elements, giving you an array ofHTMLOptionElements.map()replaces eachHTMLObjectElementin the array (here calledoption) with its value (option.value).
Dense, but it seems to work.
Watch out, selectedOptions isn't supported by IE!
Check this:
HTML:
<select id="test" multiple>
<option value="red" selected>Red</option>
<option value="rock" selected>Rock</option>
<option value="sun">Sun</option>
</select>
Javascript one line code
Array.from(document.getElementById("test").options).filter(option => option.selected).map(option => option.value);
Same as the earlier answer but using underscore.js.
function getSelectValues(select) {
return _.map(_.filter(select.options, function(opt) {
return opt.selected; }), function(opt) {
return opt.value || opt.text; });
}
My template helper looks like this:
'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
}
Riot 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>
You may use jquery plugin chosen .
<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>
Here ya go.
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)
참고URL : https://stackoverflow.com/questions/5866169/how-to-get-all-selected-values-of-a-multiple-select-box
반응형
'Programing' 카테고리의 다른 글
| R에서 데이터 파일의 빈 행 제거 (0) | 2020.11.11 |
|---|---|
| Moq + 단위 테스트-System.Reflection.TargetParameterCountException : 매개 변수 개수 불일치 (0) | 2020.11.11 |
| 단일 호스트 Node.js 프로덕션 앱에 적합한 세션 저장소는 무엇입니까? (0) | 2020.11.10 |
| Twig에서 어레이의 특정 키가 있는지 확인 (0) | 2020.11.10 |
| mongo 그룹 쿼리 필드 유지 방법 (0) | 2020.11.10 |