jQuery를 사용하여 여러 선택 상자 값을 얻는 방법은 무엇입니까?


155

jQuery를 사용하여 여러 선택 상자 값을 얻는 방법은 무엇입니까?

답변:



291

.val()다중 선택 목록 에서 함수를 사용하면 선택한 값의 배열이 반환됩니다.

var selectedValues = $('#multipleSelect').val();

그리고 당신의 HTML에서 :

<select id="multipleSelect" multiple="multiple">
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

11
만약 당신 Text 1이 가치 대신에 얻고 싶다면 ? 교체 .val()로 .text()?
— Raza Ahmed

9
아무것도 선택하지 않은 다중 선택 null은 빈 배열이 아니라 반환 됩니다. 즉, 프로그래밍 방식 으로 선택한 값을 추가 하는 경우 올바른 값을 얻기 위해 약간의 조정이 필요합니다.
— Leo

감사합니다! jQuery를 사용하여 요소에서 값을 얻는 방법은 너무 많아서 원하는 방식을 찾는 것이 불가피합니다.
— Charles Wood

5
@ 레오는 null 문제를 해결하기 위해 coalesc을 추가 할 수 있습니다. 예를 들어 var selectedValues = $('#multipleSelect').val() || []; 문자열 배열을 반환한다는 점도 주목할 가치가 있습니다. 정수와 비교하고 일치하는 항목이 없으므로을 추가했습니다 .toString().
— tkerwood

16

js map 함수를 사용할 수도 있습니다 :

$("#multipleSelect :selected").map(function(i, el) {
    return $(el).val();
}).get();

그런 다음 option요소의 속성을 얻을 수 있습니다 .

return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...

2
훌륭한 답변이지만 el모든 단일 옵션에 대해 jQuery 객체로 래핑하는 데 추가 비용을 지불 할 필요가 없습니다 . 너무 이상하지 않은 경우 DOM을 바로 사용하십시오. 로 변경할 $(el).val()수 있습니다 el.value. 물론 jQuery에 익숙하거나 다른 예제와 같이 데이터 또는 속성을 가져 오려는 경우 jQuery는 다른 사람을 해치지 않습니다.
— KyleMit

1
@KyleMit 훌륭한 팁. 이 방법을 사용하여 숨겨진 필드 값 모음을 가져와 완벽하게 작동했습니다.
— EvilDr

12
var selected=[];
 $('#multipleSelect :selected').each(function(){
     selected[$(this).val()]=$(this).text();
    });
console.log(selected);

이 문제에 대한 또 다른 접근법. 선택한 배열은 인덱스를 옵션 값으로 가지며 각 배열 항목은 텍스트를 값으로 갖습니다.

예를 들어

<select id="multipleSelect" multiple="multiple">
    <option value="abc">Text 1</option>
    <option value="def">Text 2</option>
    <option value="ghi">Text 3</option>
</select>

옵션 1과 2가 선택된 경우

선택한 배열은 다음과 같습니다.

selected['abc']=1; 
selected['def']=2.

5

한 줄만

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text);

출력 : [ "text1", "text2"]

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.value);

출력 : [ "value1", "value2"]

.join ()을 사용하는 경우

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text).join();

출력 : text1, text2, text3


4

HTML 코드 :

 <select id="multiple" multiple="multiple" name="multiple">
  <option value=""> -- Select -- </option>
  <option value="1">Opt1</option>
  <option value="2">Opt2</option>
  <option value="3">Opt3</option>
  <option value="4">Opt4</option>
  <option value="5">Opt5</option>
 </select>   

JQuery 코드 :

$('#multiple :selected').each(function(i, sel){ 
    alert( $(sel).val() ); 

});

그것이 작동하기를 바랍니다


14
답변이 확실하지 않은 경우 "작동하기를 바랍니다"라고 테스트하지 말고 확인하십시오!
— 스털링 아처

6
답이 확실하지 않으면 게시하지 마십시오 .. !! 우리는 희망을 위해 여기에 없습니다 .. !! LOL
— Clain Dsilva

3
이봐. 완벽하게 작동합니다. 확인 해봐. 당신은 그것을 희망해야합니다.
— 부적합한

2
이것은 비효율적 인 jQuery 사용법입니다. 더 나은 방법은 다음과 같은 ID 선택기를 사용하는 것입니다. $('#multiple').find(':selected')@Prabhagaran
— cannot_mutably_borrow

@YounisShah 나는 시차가 상대성 아무것도
— 아니기

0

쉼표 구분 기호로 선택된 값 가져 오기

var Accessids = "";
$(".multi_select .btn-group>ul>li input:checked").each(function(i,obj)
{
    Accessids=Accessids+$(obj).val()+",";
});
Accessids = Accessids.substring(0,Accessids.length - 1);
console.log(Accessids);

0

이것을 사용하십시오

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.