附加选项以选择菜单?

IT技术 javascript html
2021-03-10 08:39:41

使用 Javascript 如何将选项附加到 HTML 选择菜单?

例如:

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

http://jsfiddle.net/SSwhr/

4个回答

像这样的东西:

var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("id-to-my-select-box");
select.appendChild(option);
有趣,option.text绝对有效,但我找不到关于它的任何文档(W3C、MDC、quirksmode 等)。
2021-04-30 08:39:41
$(document).ready(function(){

    $('#mySelect').append("<option>BMW</option>")

})
呸!认为最初的问题是用 jQuery 标记的。但是,由于唯一的起点是 html 片段,为什么不使用 jQuery?
2021-04-26 08:39:41

HTML

<select id="mySelect">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

JavaScript

 var mySelect = document.getElementById('mySelect'),
    newOption = document.createElement('option');

newOption.value = 'bmw';

// Not all browsers support textContent (W3C-compliant)
// When available, textContent is faster (see http://stackoverflow.com/a/1359822/139010)
if (typeof newOption.textContent === 'undefined')
{
    newOption.innerText = 'BMW';
}
else
{
    newOption.textContent = 'BMW';
}

mySelect.appendChild(newOption);

演示 →

您还可以使用insertAdjacentHTML功能:

const select = document.querySelector('select')
const value = 'bmw'
const label = 'BMW'

select.insertAdjacentHTML('beforeend', `
  <option value="${value}">${label}</option>
`)