1

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

<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。我在stackoverflow中搜索了很多答案并应用了，但它不再起作用了。下面的代码就是其中之一。代码抛出错误，如undefined options. 我更改了选项而不是选项，但仍然无法正常工作。

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

我检查并应用了许多解决方案，如下面的解释： 通过类名设置元素的值，没有元素的 ID 如何使用 getElementsByClassName 确定所选下拉选项的值？

我还发现 queryselector 我尝试了以下不起作用的代码。

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 中设置选择值

拉加兹，

4

2 回答 2

1

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

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

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>

于 2020-04-01T18:29:48.237 回答
0

这现在可以工作了，但人们不得不问你为什么要这样做？如果您选择一个值，它将自行变为 true

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>

于 2020-04-01T18:39:51.103 回答