如果 select 标签的 'id' 是动态的，如何获取 select 标签的所有值？

Question

Problem: I have dropdown menus (around 10 on one page and each have different id ). I am trying to automate those control fields, where I need to set the value of dropdown menu and I am trying to implement a generic solution for all dropdown menu.

For Example: For given dropdown menu, I want to set its value to Korean (ECU-KR).

My Approach: To automate this dropdown, I am trying to get all the values of select tag and iterating each to compare with the require value (that I want to set in dropdown menu(Korean (ECU-KR))). But I stuck here.....

Need Help In:

1. How to get 'id' of select tag?

2. If I get id, then How I can get all the values of a particular select tag?

Answer 1

you can fetch the element by getElementById. the selected value can be retrieved by the value of the dropdown. the options property contains array which hold all of the options found on the dropdown so you can iterate over them and get their values.

 function onChange(event) { const id = event.id; console.log(id); var select = document.getElementById(id); console.log("selected = " + select.value); var options= new Array(); for (i = 0; i < select.options.length; i++) { options[i] = select.options[i].value; } console.log("options = " + options) }

 <select id="57" onchange="onChange(this)"> <option value="UTF-8">UTF-8</option> <option value="ISO-859">ISO-859</option> <option value="euc-kr">euc-kr</option> </select>

Answer 2

Getting the id of a selector

Assuming that you already have a variable called selector , its id can be determined by selector.id .

Getting the ids of all selects

for (let select of document.querySelectorAll('select')) {
    //do something with select.id
}

Getting selects by id pattern

Since your id contains colon, I will assume that the select tags you are interested about all have colon in their id . In this case:

for (let select of document.querySelectorAll('select[id*=":"]')) {
    //Do something with select.id
}

The *= is the contains selector.

Getting the values of selects having some id pattern

let values = {};
for (let select of document.querySelectorAll('select[id*=":"]')) {
    values[select.id] = [];
    for (let option of select.querySelectorAll('option')) {
        values.push(option.value);
    }
}

Answer 3

Assuming you know the value you want to set – and with the assumption that only one <option> element exists with that value – I'd suggest not worrying about the <select> element and instead focus on the <option> :

// select the <option> element by its value attribute:
let option = document.querySelector('option[value="ECU-KR"]'),
    // if you still have need of the <select> element:
    select = option.closest('select');
// set the selected property of the <option>:
option.selected = true;

Answer 4

let x = document.getElementById("57:").selectedIndex;
let values = document.getElementsByTagName("option")[x].value;```

This should do that for you.