我如何通过jQuery传递它的ID来获得一个选择的所有选项?

我只是想获取它们的值,而不是文本。


没有jQuery 我知道HTMLSelectElement元素包含一个选项属性,这是一个htmlloptionscollection。

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

一个12岁的答案。让我们对它进行一些改进(使用. queryselectorall,将结果HTMLOptionsCollection扩展到Array并映射值)。

// helper to retrieve an array of elements using a css selector const nodes = selector => [...document.querySelectorAll(selector)]; const results = { pojs: nodes(`#demo option`).map(o => o.value), jq: $(`#demo option`).toArray().map( o => o.value ), } console.log( `pojs: [${results.pojs.slice(0, 5)}]` ); console.log( `jq: [${results.jq.slice(0, 5)}]` ); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="demo"> <option value="Belgium">Belgium</option> <option value="Botswana">Botswana</option> <option value="Burkina Faso">Burkina Faso</option> <option value="Burundi">Burundi</option> <option value="China">China</option> <option value="France">France</option> <option value="Germany">Germany</option> <option value="India">India</option> <option value="Japan">Japan</option> <option value="Malaysia">Malaysia</option> <option value="Mali">Mali</option> <option value="Namibia">Namibia</option> <option value="Netherlands">Netherlands</option> <option value="North Korea">North Korea</option> <option value="South Korea">South Korea</option> <option value="Spain">Spain</option> <option value="Sweden">Sweden</option> <option value="Uzbekistan">Uzbekistan</option> <option value="Zimbabwe">Zimbabwe</option> </select>


Use:

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

.each() | jQuery API文档


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

这将把#myselectbox的选项值放入一个整洁的数组中:

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

// Next, translate that into an array of just the values
var values = $.map(options, e => $(e).val())

有些答案使用这两种方法,但恕我直言,地图是更好的选择:

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

jQuery中有(至少)两个地图函数。Thomas Petersen的答案是“Utilities/jQuery.map”;这个答案使用了“遍历/映射”(因此代码更简洁)。

这取决于你要如何处理这些值。如果你想从函数中返回值,map可能是更好的选择。但是,如果您打算直接使用这些值,则可能需要每个值。


您可以根据复选框的名称获取所有“选定值”,并将它们显示在以“,”分隔的字符串中。

一个很好的方法是使用jQuery的$.map():

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

alert(selected_val);

美元。地图可能是最有效的方法。

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

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

如果你只想要那些被选中的选项,你可以在$('#selectBox option:selected')中添加更改选项。

第一行选择所有复选框,并将其jQuery元素放入变量中。然后,我们使用jQuery的.map函数对该变量的每个元素应用一个函数;我们所做的只是返回每个元素的值,因为这是我们所关心的。因为我们是在map函数内部返回它们,它实际上会根据请求构建一个值的数组。


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

不过,正确的方法是设置元素的DOM属性,如下所示:

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

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

Or:

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

看看结果:

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

工作示例

最有效的方法是使用$.map()

例子:

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

你可以使用以下代码:

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

如果您正在寻找一些选定文本的所有选项,那么下面的代码将工作。

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

对于多选选项:

$('#test').val()返回所选值列表。 $(" #测试选项”)。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' />


捷径

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

or

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

我发现它既简短又简单,并且可以在Dev Tool控制台本身进行测试。

$ (" # id选项”)。Each ((index,element)=>console.log(index: ${index},值:${element. log)Value}, text: ${element.text})


    var arr = [], option='';
$('select#idunit').find('option').each(function(index) {
arr.push ([$(this).val(),$(this).text()]);
//option = '<option '+ ((result[0].idunit==arr[index][0])?'selected':'') +'  value="'+arr[index][0]+'">'+arr[index][1]+'</option>';
            });
console.log(arr);
//$('select#idunit').empty();
//$('select#idunit').html(option);

另一种方法是使用toArray(),以便使用胖箭头函数与map,例如:

const options = $('#myselect option').toArray().map(it => $(it).val())

这是一种生成逗号分隔值列表的非常简单的方法。

var values = "";

$('#sel-box option').each(function () { 
   values = values + $(this).val() + ";";
});

$("select#MY_SELECT_ID").find('option').each(function() {
    console.log($(this).val());
    console.log($(this).text());
});