วิธีรับตัวเลือกทั้งหมดโดยใช้ jQuery

ฉันจะรับตัวเลือกทั้งหมดของการเลือกผ่าน jQuery โดยส่งผ่าน ID ได้อย่างไร

ฉันแค่มองหาค่าของพวกเขาไม่ใช่ตัวอักษร

ใช้:

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

.each () | เอกสาร jQuery API

ฉันไม่ทราบ jQuery แต่ฉันรู้ว่าถ้าคุณได้รับองค์ประกอบที่เลือกมันมีวัตถุ 'ตัวเลือก'

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 เป็นตัวแปร จากนั้นเราใช้.mapฟังก์ชั่นของ jQuery เพื่อใช้ฟังก์ชั่นกับแต่ละองค์ประกอบของตัวแปรนั้น สิ่งที่เราทำคือคืนค่าของแต่ละองค์ประกอบตามที่เราสนใจ เนื่องจากเราจะส่งคืนพวกเขาภายในฟังก์ชั่นแผนที่มันสร้างอาร์เรย์ของค่าตามที่ร้องขอ

บางคำตอบใช้eachแต่mapเป็นทางเลือกที่ดีกว่าที่นี่ IMHO:

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

มีอย่างน้อยสองmapฟังก์ชั่นใน jQuery คำตอบของ Thomas Petersen ใช้ "Utilities / jQuery.map"; คำตอบนี้ใช้ "Traversing / 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();});

คุณสามารถใช้ "ค่าที่เลือก" ทั้งหมดของคุณด้วยชื่อของช่องทำเครื่องหมายและแสดงไว้ในการต่อยคั่นด้วย ","

วิธีที่ดีในการทำเช่นนี้คือใช้ $ .map () ของ jQuery:

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