如何在没有ID的情况下通过getElementByClassName或querySelector在javascript中设置选择值dropdownlist

戴维

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

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

拉加兹

KooiInc

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

无论如何,您可以使用此CSS选择器选择器的选定选项设置为某个选项(例如,Male)

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档