Làm cách nào để có được tất cả các tùy chọn của một lựa chọn bằng jQuery?

Làm cách nào tôi có thể nhận được tất cả các tùy chọn của một lựa chọn thông qua jQuery bằng cách chuyển ID của nó?

Tôi chỉ tìm kiếm để có được giá trị của họ, không phải là văn bản.

Sử dụng:

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

.each () | Tài liệu API jQuery

Tôi không biết jQuery, nhưng tôi biết rằng nếu bạn lấy phần tử select, nó chứa đối tượng 'tùy chọn'.

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

$.map có lẽ là cách hiệu quả nhất để làm điều này

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

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

Bạn có thể thêm các tùy chọn thay đổi $('#selectBox option:selected')nếu bạn chỉ muốn những tùy chọn được chọn.

Dòng đầu tiên chọn tất cả các hộp kiểm và đặt phần tử jQuery của chúng vào một biến. Sau đó, chúng tôi sử dụng .mapchức năng của jQuery để áp dụng một hàm cho từng thành phần của biến đó; tất cả những gì chúng tôi đang làm là trả lại giá trị của từng yếu tố vì đó là tất cả những gì chúng tôi quan tâm. Bởi vì chúng tôi đang trả lại chúng bên trong chức năng bản đồ, nó thực sự xây dựng một mảng các giá trị theo yêu cầu.

Một số câu trả lời sử dụng each, nhưng maplà một thay thế tốt hơn ở đây IMHO:

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

Có (ít nhất) hai maphàm trong jQuery. Câu trả lời của Thomas Petersen sử dụng "Tiện ích / jQuery.map"; câu trả lời này sử dụng "Traversing / map" (và do đó mã sạch hơn một chút).

Nó phụ thuộc vào những gì bạn sẽ làm với các giá trị. Nếu bạn, giả sử, muốn trả về các giá trị từ một hàm, mapcó lẽ là sự thay thế tốt hơn. Nhưng nếu bạn sẽ sử dụng các giá trị trực tiếp, bạn có thể muốn each.

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

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

Mặc dù, cách ĐÚNG là đặt thuộc tính DOM của phần tử, như vậy:

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

Điều này sẽ đặt các giá trị tùy chọn #myselectboxthành một mảng sạch đẹp cho bạn:

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

Bạn có thể lấy tất cả "giá trị đã chọn" của mình theo tên của các hộp kiểm và trình bày chúng trong một sting cách nhau bởi ",".

Một cách hay để làm điều này là sử dụng $ .map ():

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

alert(selected_val);

Ví dụ làm việc

Cách hiệu quả nhất để làm điều này là sử dụng $.map()

Thí dụ:

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

Bạn có thể sử dụng mã sau đây cho điều đó:

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

Đối với tùy chọn đa lựa chọn:

$('#test').val()trả về danh sách các giá trị được chọn. $('#test option').lengthtrả về tổng số tùy chọn (cả được chọn và không được chọn)

Đây là một Script đơn giản với 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>

Dưới đây là một ví dụ đơn giản trong jquery để lấy tất cả các giá trị, văn bản hoặc giá trị của mục đã chọn hoặc văn bản của mục đã chọn

$('#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();

Hoặc là:

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

Để xem kết quả:

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

Nếu bạn đang tìm kiếm tất cả các tùy chọn với một số văn bản đã chọn thì đoạn mã dưới đây sẽ hoạt động.

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

Con đường ngắn

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

hoặc là

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