jQuery를 사용하여 선택의 모든 옵션을 얻는 방법은 무엇입니까?

ID를 전달하여 jQuery를 통해 선택의 모든 옵션을 얻는 방법은 무엇입니까?

나는 텍스트가 아닌 그들의 가치만을 얻으려고합니다.

사용하다:

$("#id option").each(function()
{
    // Add $(this).val() to your list
});

.each () | jQuery API 설명서

jQuery는 모르지만 select 요소를 얻으면 'options'객체가 포함되어 있다는 것을 알고 있습니다.

var myOpts = document.getElementById('yourselect').options;
alert(myOpts[0].value) //=> Value of the first option

$.map 아마도 가장 효율적인 방법 일 것입니다.

var options = $('#selectBox option');

var values = $.map(options ,function(option) {
    return option.value;
});

선택한 옵션 $('#selectBox option:selected')만 원하는 경우 변경 옵션을 추가 할 수 있습니다 .

첫 번째 줄은 모든 확인란을 선택하고 jQuery 요소를 변수에 넣습니다. 그런 다음 .mapjQuery 의 함수 를 사용하여 해당 변수의 각 요소에 함수를 적용합니다. 우리가하고있는 모든 것은 우리가 관심있는 모든 요소의 가치를 돌려주는 것입니다. map 함수 안에서 반환하기 때문에 실제로 요청한대로 값의 배열을 만듭니다.

일부 답변은을 사용 each하지만 map여기서 IMHO가 더 나은 대안입니다.

$("select#example option").map(function() {return $(this).val();}).get();

mapjQuery 에는 적어도 두 가지 기능이 있습니다. Thomas Petersen의 답변은 "Utilities / jQuery.map"을 사용합니다. 이 답변은 "여행 /지도"(따라서 좀 더 깔끔한 코드)를 사용합니다.

값으로 수행 할 작업에 따라 다릅니다. 예를 들어 함수에서 값을 반환하려는 map경우 더 나은 대안 일 수 있습니다. 그러나 값을 직접 사용하려는 경우에는 아마도 원할 것 each입니다.

$('select#id').find('option').each(function() {
    alert($(this).val());
});

$("#id option").each(function()
{
    $(this).prop('selected', true);
});

는 있지만 올바른 방법은 요소의 DOM 속성을 설정하는 것입니다, 그래서 좋아한다 :

$("#id option").each(function(){
    $(this).attr('selected', true);
});

이것은 옵션 값을 #myselectbox깔끔하고 깔끔한 배열로 만듭니다.

// First, get the elements into a list
var domelts = $('#myselectbox option');

// Next, translate that into an array of just the values
var values = $.map(domelts, function(elt, i) { return $(elt).val();});

확인란의 이름으로 "선택한 값"을 모두 가져 와서 ","로 구분 된 따로 표시 할 수 있습니다.

이를 수행하는 좋은 방법은 jQuery의 $ .map ()을 사용하는 것입니다.

var selected_val = $.map($("input[name='d_name']:checked"), function(a)
    {
        return a.value;
    }).join(',');

alert(selected_val);

작업 예

이를 수행하는 가장 효율적인 방법은 $.map()

예:

var values = $.map($('#selectBox option'), function(ele) {
   return ele.value; 
});

이를 위해 다음 코드를 사용할 수 있습니다.

var assignedRoleId = new Array();
$('#RolesListAssigned option').each(function(){
    assignedRoleId.push(this.value);
});

다중 선택 옵션의 경우 :

$('#test').val()선택된 값의 목록을 반환합니다. $('#test option').length총 옵션 수를 반환합니다 (모두 선택 및 선택되지 않음).

이것은 jQuery를 사용한 간단한 스크립트입니다.

var items = $("#IDSELECT > option").map(function() {
    var opt = {};
    opt[$(this).val()] = $(this).text();
    return opt;
}).get();
var selectvalues = [];

for(var i = 0; i < items.length; i++) {
    for(key in items[i]) {


        var id = key;
        var text = items[i][key];

        item = {}
        item ["id"] = id;
        item ["text"] = text;

        selectvalues.push(item);

    }
}
console.log(selectvalues);
copy(selectvalues);

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

다음은 선택된 항목의 모든 값, 텍스트 또는 값 또는 선택한 항목의 텍스트를 가져 오는 jquery의 간단한 예입니다.

$('#nCS1 > option').each((index, obj) => {
   console.log($(obj).val());
})

printOptionValues = () => {

  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).val());
  })

}

printOptionTexts = () => {
  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).text());
  })
}

printSelectedItemText = () => {
  console.log($('#nCS1 option:selected').text());
}

printSelectedItemValue = () => {
  console.log($('#nCS1 option:selected').val());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="1" id="nCS1" name="nCS1" class="form-control" >
					<option value="22">Australia</option>
          <option value="23">Brunei</option>
          <option value="33">Cambodia</option>
          <option value="32">Canada</option>
          <option value="27">Dubai</option>
          <option value="28">Indonesia</option>
          <option value="25">Malaysia</option>				
</select>
<br/>
<input type='button' onclick='printOptionValues()' value='print option values' />
<br/>
<input type='button' onclick='printOptionTexts()' value='print option texts' />
<br/>
<input type='button' onclick='printSelectedItemText()' value='print selected option text'/>
<br/>
<input type='button' onclick='printSelectedItemValue()' value='print selected option value' />

$("input[type=checkbox][checked]").serializeArray();

또는:

$(".some_class[type=checkbox][checked]").serializeArray();

결과를 보려면

alert($("input[type=checkbox][checked]").serializeArray().toSource());

선택한 텍스트가있는 모든 옵션을 찾고 있다면 아래 코드가 작동합니다.

$('#test').find("select option:contains('B')").filter(":selected");

짧은 길

$(() => {
$('#myselect option').each((index, data) => {
    console.log(data.attributes.value.value)
})})

또는

export function GetSelectValues(id) {
const mData = document.getElementById(id);
let arry = [];
for (let index = 0; index < mData.children.length; index++) {
    arry.push(mData.children[index].value);
}
return arry;}