javascript单击下拉列表中的值答案

【问题标题】：javascript click a value in dropdown listjavascript单击下拉列表中的值
【发布时间】：2019-05-02 23:39:14
【问题描述】：

我有以下用 HTML 编写的代码：

    <table cellspacing="0" cellpadding="0" width="100%" class="HeaderTable">
    <tbody><tr>
        <td id="dnn_ctr6707_TimeTableView_TdClassesList" class="HeaderClassesCell">
            class
            <select name="dnn$ctr6707$TimeTableView$ClassesList" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;dnn$ctr6707$TimeTableView$ClassesList\&#39;,\&#39;\&#39;)&#39;, 0)" id="dnn_ctr6707_TimeTableView_ClassesList" class="HeaderClasses">
            <option selected="selected" value="14">a</option>
            <option value="15">b</option>
            <option value="16">c</option>
            <option value="17">d</option>
            <option value="49">e</option>
            <option value="60">f</option>
        </select></td>

我正在尝试做的是程序单击控制台选项卡中的选项“b”。出于某种原因，它对我不起作用，尽管我认为它看起来不错。

这是我尝试过的：

var x = document.getElementById('dnn_ctr6707_TimeTableView_ClassesList') // this part work
var y = x.options[1].click() // I managed to get the text of the option but I want it to perform click and it doesn't work that way :(

感谢您的帮助！

【问题讨论】：

为什么要让你的程序点击选项'b'？
How do I programmatically set the value of a select box element using JavaScript?的可能重复
试试x.selectedIndex = 1;
或x.selected = true。
@Thefourthbird 谢谢它也有效，但我发现 pew007 答案更短:)

标签： javascript

【解决方案1】：

我认为您要做的是设置选择的值而不是单击选项。

试试这个：

document.getElementById('dnn_ctr6707_TimeTableView_ClassesList').value = "15"

【讨论】：

谢谢！，我看到的最短答案:)
@Z.Zadon 很高兴为您提供帮助
@pew007 这可以很好地更改选择值，但是在提交表单时它不会验证该字段是否正确。似乎它检测到元素并没有真正改变并且缺少某些事件。任何想法如何解决这个问题？

【解决方案2】：

我认为您的要求是激活事件。我相信 Javascript 没有 .click() 函数。

var x = document.getElementById('dnn_ctr6707_TimeTableView_ClassesList');
var evt = new Event('click');
x.options[1].dispatchEvent(evt);

【讨论】：

【解决方案3】：

这里有一些简单的代码，可让您在文本字段中输入索引，然后从 <select> 元素中选择该索引。

var btn = document.querySelector('#select');
var inp = document.querySelector('#inp');
var sel = document.querySelector('#dnn_ctr6707_TimeTableView_ClassesList');

btn.addEventListener('click', function() {
  var val = parseInt(inp.value, 10);
  sel.selectedIndex = val;
});

class
<select name="dnn$ctr6707$TimeTableView$ClassesList" id="dnn_ctr6707_TimeTableView_ClassesList" class="HeaderClasses">
<option selected="selected" value="14">a</option>
<option value="15">b</option>
<option value="16">c</option>
<option value="17">d</option>
<option value="49">e</option>
<option value="60">f</option>
</select>
<hr/>
<input id="inp" type="text" value="0"/>
<button id="select">Select</button>

【讨论】：