如何通过没有 id 的 getElementByClassName 或 querySelector 在 javascript 中设置 select 值下拉列表

Question

我正在尝试在 javascript 中设置 select 值下拉列表。我有如下下拉列表：

<div class="gender_option" id="create">
    <span class="value">
        <select name="account" class="select-gender">
            <option value="Unknown">Please select</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </span>
</div>

首先我尝试了getElementByClassName。我在 Whosebug 中搜索了很多答案问题并应用了但它不再起作用。下面的代码就是其中之一。代码抛出类似 undefined options 的错误。我更改了选项而不是选项，但仍然不起作用。

var e = document.getElementsByClassName('select_gender');
e[1].options[e[1].selectedIndex].selected=true;

我检查并应用了很多解决方案，如以下解释： Set the value of element by classname, without having the element's ID

我还发现查询select或者我尝试了以下不起作用的代码。

var selectElement = document.querySelector('.select_gender');
var output1 = selectElement.options[selectElement.selectedIndex].value;

for (var j=0; j<output1.length; j++) {
    if (radioElements[i].getAttribute('value') == 'MALE') {
         output1[j].selected=true;
    }
}

如何在没有 id 参数

的情况下在 javascript 中设置 select 值

拉加德，

Answer 1

var selectElement = document.querySelector('.select_gender'); 包含拼写错误：.select_gender 应该是 .select-gender。这就是为什么 e[1].options[e[1].selectedIndex].selected=true; 给你一个错误。

无论如何，你可以使用这个css selector将选择器的选择选项设置为某个选项（例如男性）

document.querySelector(".select-gender option[value='Male']").selected = true;

// now selectedIndex (of the *selector*) is 1
console.log(document.querySelector(".select-gender").selectedIndex);

// and its value = "Male"
console.log(document.querySelector(".select-gender").value);

document.querySelector("button").addEventListener("click", setSelectorToFemale);

// set by finding the desired option
// not very practical, just to demo
function setSelectorToFemale() {
  const desiredValue = "Female";
  const foundOption = [...document.querySelectorAll(".select-gender option")]
  //             ^ spread ElementList to Array
    .find(o => o.value === desiredValue);
  //             ^ only option with value desiredValue
  if (foundOption) {
    foundOption.selected = true;
  }
}

<div class="gender_option" id="create">
    <span class="value">
        <select name="account" class="select-gender">
            <option value="Unknown">Please select</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </span>
    <button>Select Female</button>
</div>

Answer 2

这现在可以工作了，但是有人要问你为什么要这样做？如果你 select 一个值，它将自动变为真

function myFunction(){
var e = document.getElementsByClassName("select-gender");
e[0].options[e[0].selectedIndex].selected=true;

console.log(e[0].options);

console.log(e[0]);
}

<div class="gender_option" id="create">
    <span class="value">
        <select name="account" class="select-gender" onchange='myFunction()'>
            <option value="Unknown">Please select</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </span>
</div>

如何通过没有 id 的 getElementByClassName 或 querySelector 在 javascript 中设置 select 值下拉列表

How to set select value dropdownlist in javascript via getElementByClassName or querySelector without id

javascript

html

dom

htmlcollection