在 Javascript 中设置下拉值答案

【问题标题】：Setting dropdown values in Javascript在 Javascript 中设置下拉值
【发布时间】：2020-11-24 06:14:10
【问题描述】：

我有一个带有以下 HTML 的下拉菜单。

<select name="custom_123" id="custom_123_123" class="custom form-control form-control-full form-select searchable  abcd-done" style="display: none;">
<option value="" selected="selected">None</option>
<option value="1">Alaska</option>
<option value="2">Newyork</option>
</select>
<div id="custom_123_123_abcd" class="abcd-container abcd-container-single abcd-container- 
active" style="width: 100%"><a href="javascript:void(0)" class="abcd-single" 
tabindex="-1"><span>Alaska</span></a>
</div>

我希望能够在下拉列表中选择 Newyork。为此，我在下面。

var dropdown_id = document.querySelector('[id^="custom_123"]').id;
var dropdown_abcd = dropdown_id + 'abcd';
document.getElementById(dropdown_abcd).getElementsByClassName("abcd-single")[0].innerHTML = "Alaska";

但同样没有得到应用。有人可以帮忙吗？

【问题讨论】：

这能回答你的问题吗？ How do I programmatically set the value of a select box element using JavaScript?
没有。我之前检查过，看起来很相似，但由于某种原因，解决方案对我不起作用。
您是否尝试过链接上接受的答案中的解决方案？这是设置选择值的正确方法。因此，如果它不起作用，则说明代码中的其他地方有问题。你收到错误了吗？

标签： javascript node.js dom-events greasemonkey

【解决方案1】：

这是一个基于您的代码的示例：

const select = document.querySelector('[id^="custom_123"]');
select.value = 'Alaska';

评论更新
如果 select 上有监听器，这里有一个关于如何触发 change 事件的示例。

const select = document.querySelector('[id^="custom_123"]');
select.value = 'Alaska';
select.dispatchEvent(new CustomEvent('change'));

【讨论】：

我也试过了，还是不行。文本反映在页面上，但是当浏览器进行 ajax 调用时，它不会选择这个值
@RekhaR 答案基于您的问题。必须检查 ajax 调用以查看它从何处获取数据。我将添加一个替代方案，但这是一个一般性的想法，可能需要调整。