在 Javascript 中設置下拉值

Question

我有一個包含以下 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";

但同樣沒有得到應用。 任何人都可以幫忙嗎？

Answer 1

這是基於您的代碼的示例：

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

評論更新
如果選擇上有偵聽器，這里是一個關於如何觸發更改事件的示例。

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