Hướng dẫn append option to select javascript - tùy chọn nối thêm để chọn javascript

Sử dụng JavaScript Làm thế nào tôi có thể nối một tùy chọn vào menu Chọn HTML?

ví dụ: điều này:

<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/

Ball Matt

349K98 Huy hiệu vàng636 Huy hiệu bạc699 Huy hiệu đồng98 gold badges636 silver badges699 bronze badges

Đã hỏi ngày 3 tháng 3 năm 2011 lúc 15:27Mar 3, 2011 at 15:27

Một cái gì đó như thế này:

var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("id-to-my-select-box");
select.appendChild(option);

Đã trả lời ngày 3 tháng 3 năm 2011 lúc 15:29Mar 3, 2011 at 15:29

Marcus Frödinmarcus FrödinMarcus Frödin

12.2k2 Huy hiệu vàng24 Huy hiệu bạc16 Huy hiệu đồng2 gold badges24 silver badges16 bronze badges

1

$(document).ready(function(){

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

})

Đã trả lời ngày 3 tháng 3 năm 2011 lúc 15:30Mar 3, 2011 at 15:30

Ryan Millerryan MillerRyan Miller

3811 Huy hiệu bạc12 Huy hiệu đồng1 silver badge12 bronze badges

1

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);

Bản demo →

Đã trả lời ngày 3 tháng 3 năm 2011 lúc 15:30Mar 3, 2011 at 15:30

Ryan Millerryan MillerMatt Ball

349K98 Huy hiệu vàng636 Huy hiệu bạc699 Huy hiệu đồng98 gold badges636 silver badges699 bronze badges

Đã hỏi ngày 3 tháng 3 năm 2011 lúc 15:27

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

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

Một cái gì đó như thế này:Nov 21, 2017 at 16:23

Đã trả lời ngày 3 tháng 3 năm 2011 lúc 15:29imkost

Marcus Frödinmarcus Frödin6 gold badges28 silver badges47 bronze badges

Thêm tùy chọn trước tùy chọn đã chọn trong danh sách thả xuống:

Thí dụ

Thêm tùy chọn "Kiwi" tại vị trí chỉ mục "2" của danh sách thả xuống:

var x = document.getEuityById ("mySelect"); var tùy chọn = document.createelement ("tùy chọn"); tùy chọn.text = "kiwi"; x.add (tùy chọn);
var option = document.createElement("option");
option.text = "Kiwi";
x.add(option);

Hãy tự mình thử »

Định nghĩa và cách sử dụng

Phương thức ADD () được sử dụng để thêm tùy chọn vào danh sách thả xuống.

Mẹo: Để xóa một tùy chọn khỏi danh sách thả xuống, hãy sử dụng phương thức Remove (). To remove an option from a drop-down list, use the remove() method.

Hỗ trợ trình duyệt

Cú pháp

selectObject.add (tùy chọn, index)

Giá trị tham số

Chi tiết kỹ thuật

Nhiều ví dụ hơn

Thí dụ

Thêm tùy chọn "Kiwi" ở đầu danh sách thả xuống:

var x = document.getEuityById ("mySelect"); var tùy chọn = document.createelement ("tùy chọn"); tùy chọn.text = "kiwi"; x.add (tùy chọn, x [0]);
var option = document.createElement("option");
option.text = "Kiwi";
x.add(option, x[0]);

Hãy tự mình thử »

Thí dụ

Thêm tùy chọn "Kiwi" ở đầu danh sách thả xuống:

var x = document.getEuityById ("mySelect"); var tùy chọn = document.createelement ("tùy chọn"); tùy chọn.text = "kiwi"; x.add (tùy chọn, x [0]);
var option = document.createElement("option");
option.text = "Kiwi";
x.add(option, x[2]);

Hãy tự mình thử »

Thí dụ

Thêm tùy chọn "Kiwi" ở đầu danh sách thả xuống:

var x = document.getEuityById ("mySelect"); var tùy chọn = document.createelement ("tùy chọn"); tùy chọn.text = "kiwi"; x.add (tùy chọn, x [0]);
if (x.selectedIndex >= 0) {
  var option = document.createElement("option");
  option.text = "Kiwi";
  var sel = x.options[x.selectedIndex];
  x.add(option, sel);
}

Hãy tự mình thử »

Thêm tùy chọn "Kiwi" tại vị trí chỉ mục "2" của danh sách thả xuống:

Làm thế nào để thêm phần tử tùy chọn để chọn trong JavaScript?

Làm thế nào để nối thêm tùy chọn trong chọn jQuery?

Làm thế nào để nối giá trị tùy chọn trong Ajax?

Làm thế nào thêm và loại bỏ tùy chọn Chọn trong jQuery?