jQuery를 사용하여 여러 개의 선택 상자 값을 얻는 방법은?

jQuery를 사용하여 여러 개의 선택 상자 값을 얻는 방법은?

jQuery를 사용하여 여러 개의 선택 상자 값을 얻는 방법은?

다중 선택 목록에서 이 기능을 사용하면 선택한 값의 배열이 반환됩니다.

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>

jQuery.val()

  var foo = $('#multiple').val(); 

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

한 줄만 더.

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

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.

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

});

잘 됐으면 좋겠네요.

이거만 써요.

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});

쉼표 구분 기호에서 선택한 값 가져오기

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

한 페이지에 여러 개의 선택 상자가 있고, ID를 추적하는 것보다 여러 개일 경우 선호할 수 있는 클래스가 모두 동일한 경우:

$('.classname option:selected').map(function(){
    return this.value; // If you want value.
    // Or you could also do.
    return this.text; // If you want text of select boxes.
}).get(); // It will return an Array of selected values/texts.

이 jQuery는 저에게 잘 어울립니다.저는 다양한 작업에 대해 getFormValues() 함수를 사용하기 때문에 일부 폼 데이터가 누락되었을 때 재구성하기에 좋습니다.

각 양식 필드를 확인하여 다중 선택 유형인지 확인한 후 선택한 모든 옵션을 사용하여 값을 재구성합니다.체크박스에도 비슷한 것이 필요할 것이라고 확신합니다.

// Get form values as a key-value Object
function getFormValues(form) {
  var formData = new FormData(form[0]),
      values = Object.fromEntries(formData);
  
  // Rebuild multi-select values.
  $.each(values, function(key, value){
    var element = $(form).find(':input[name="'+key+'"]');
    if (element.is('select[multiple]')){
      values[key] = element.val();
    }
  });
  return values;
}

`

// Use with AJAX.
$('form').on('submit', function(e){
  e.preventDefault();
  var form = $(this);
  
  $.ajax({
    URL: 'http://google.com/',
    data: getFormValues(form),
    success: function(data, textStatus){
      console.log(data);
    },
    error: function(jqXHR, textStatus, errorThrown){
      console.log(textStatus, errorThrown);
    }
  });
});

언급URL : https://stackoverflow.com/questions/3243476/how-to-get-multiple-select-box-values-using-jquery