Làm thế nào để bạn loại bỏ tất cả các tùy chọn của một hộp chọn và sau đó thêm một tùy chọn và chọn nó với jQuery?

Sử dụng jQuery lõi, làm thế nào để bạn loại bỏ tất cả các tùy chọn của hộp chọn, sau đó thêm một tùy chọn và chọn nó?

Hộp chọn của tôi là như sau.

<Select id="mySelect" size="9"> </Select>

EDIT: Đoạn mã sau rất hữu ích với chuỗi. Tuy nhiên, (trong Internet Explorer) .val('whatever')đã không chọn tùy chọn được thêm vào. (Tôi đã sử dụng cùng một 'giá trị' trong cả hai .appendvà .val.)

$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');

EDIT: Cố gắng lấy mã này để bắt chước mã này, tôi sử dụng mã sau bất cứ khi nào trang / biểu mẫu được đặt lại. Hộp chọn này được điền bởi một tập hợp các nút radio. .focus()đã gần hơn, nhưng tùy chọn không xuất hiện được chọn như nó làm với .selected= "true". Không có gì sai với mã hiện tại của tôi - Tôi chỉ đang cố gắng học jQuery.

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

EDIT: câu trả lời được chọn gần với những gì tôi cần. Điều này làm việc cho tôi:

$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;

Nhưng cả hai câu trả lời đều đưa tôi đến giải pháp cuối cùng ..

$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;

Tại sao không sử dụng javascript đơn giản?

document.getElementById("selectID").options.length = 0;

Nếu mục tiêu của bạn là xóa tất cả các tùy chọn khỏi lựa chọn ngoại trừ tùy chọn đầu tiên (thường là tùy chọn 'Vui lòng chọn một mục'), bạn có thể sử dụng:

$('#mySelect').find('option:not(:first)').remove();

Tôi đã gặp một lỗi trong IE7 (hoạt động tốt trong IE6) khi sử dụng các phương thức jQuery ở trên sẽ xóa phần chọn trong DOM nhưng không hiển thị trên màn hình. Sử dụng Thanh công cụ dành cho nhà phát triển IE Tôi có thể xác nhận rằng phần chọn đã bị xóa và có các mục mới, nhưng trực quan phần chọn vẫn hiển thị các mục cũ - mặc dù bạn không thể chọn chúng.

Cách khắc phục là sử dụng các phương thức / tiêu chuẩn DOM tiêu chuẩn (như bản gốc của poster) để xóa thay vì jQuery - vẫn sử dụng jQuery để thêm tùy chọn.

$('#mySelect')[0].options.length = 0;

Không chắc chắn chính xác những gì bạn có nghĩa là "thêm một và chọn nó", vì nó sẽ được chọn theo mặc định. Nhưng, nếu bạn thêm nhiều hơn một, nó sẽ có ý nghĩa hơn. Làm thế nào về một cái gì đó như:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

Trả lời "EDIT" : Bạn có thể làm rõ ý của bạn bằng cách "Hộp chọn này được đặt bằng một bộ nút radio" không? Một <select>phần tử không thể (về mặt pháp lý) có chứa <input type="radio">các phần tử.

$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

$("#control").html("<option selected=\"selected\">The Option...</option>");

Nhờ những câu trả lời tôi nhận được, tôi đã có thể tạo ra một cái gì đó như sau, phù hợp với nhu cầu của tôi. Câu hỏi của tôi có phần mơ hồ. Cảm ơn đã theo dõi. Vấn đề cuối cùng của tôi đã được giải quyết bằng cách đưa "chọn" vào tùy chọn mà tôi muốn chọn.

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
  $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // Bind click event to each radio button.
  $("input[name='myRadio']").bind("click",
                                  function() {
    switch(this.value) {
      case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
      case "2":
        $('#mySelect').find('option').remove() ;
        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
        var options = '' ;
        for (var i = 0; i < items.length; i++) {
          if (i==0) {
            options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>

Làm thế nào về việc chỉ thay đổi html sang dữ liệu mới.

$('#mySelect').html('<option value="whatever">text</option>');

Một vi dụ khac:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');

1. Trước tiên, xóa tất cả tùy chọn hiện tại đã thực hiện cái đầu tiên (- Chọn--)

2. Nối các giá trị tùy chọn mới bằng cách sử dụng vòng lặp từng cái một

   $('#ddlCustomer').find('option:not(:first)').remove();
   for (var i = 0; i < oResult.length; i++) {
      $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID));
   }

Tôi đã tìm thấy trên mạng một cái gì đó như dưới đây. Với hàng ngàn tùy chọn như trong tình huống của tôi, điều này nhanh hơn rất nhiều so với .empty()hoặc .find().remove()từ jQuery.

var ClearOptionsFast = function(id) {
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}

Thêm thông tin ở đây .

Cách khác:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

Trong liên kết này, có các thực tiễn tốt https://api.jquery.com/select/

$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

Dòng mã đầu tiên sẽ loại bỏ tất cả các tùy chọn của hộp chọn vì không có tiêu chí tìm tùy chọn nào được đề cập.

Dòng mã thứ hai sẽ thêm Tùy chọn với giá trị được chỉ định ("testValue") và Văn bản ("TestText").

Dựa trên câu trả lời của mauretto, điều này dễ đọc và dễ hiểu hơn một chút:

$('#mySelect').find('option').not(':first').remove();

Để xóa tất cả các tùy chọn ngoại trừ một tùy chọn có giá trị cụ thể, bạn có thể sử dụng tùy chọn này:

$('#mySelect').find('option').not('[value=123]').remove();

Điều này sẽ tốt hơn nếu tùy chọn được thêm vào đã có sẵn.

Sử dụng jquery prop () để xóa tùy chọn đã chọn

$('#mySelect option:selected').prop('selected', false);

Điều này sẽ thay thế mySelect hiện tại của bạn bằng một mySelect mới.

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');

Bạn có thể làm đơn giản bằng cách thay thế html

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');

Chỉ cần một dòng để xóa tất cả các tùy chọn khỏi thẻ chọn và sau khi bạn có thể thêm bất kỳ tùy chọn nào, sau đó tạo dòng thứ hai để thêm tùy chọn.

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));

• lưu các giá trị tùy chọn sẽ được nối vào một đối tượng
• xóa các tùy chọn hiện có trong thẻ chọn
• Lặp lại đối tượng danh sách và nối các nội dung vào thẻ chọn dự định

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

$('#selectID').empty();

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Tôi đã thấy mã này trong Chọn2 - Xóa lựa chọn

$('#mySelect').val(null).trigger('change');

Mã này hoạt động tốt với jQuery ngay cả khi không có Select2

Hy vọng nó sẽ làm việc

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');