Korzystanie z Core Jquery, jak usunąć wszystkie opcje pole wyboru, a następnie dodaj jedną opcję i wybierz go?

Moje pole wyboru jest następujące.

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

Edytuj: Poniższy kod był pomocny w łańcuchu. Jednak (w programie Internet Explorer) .val('whatever') nie wybrano opcji dodanej. (Użyłem tej samej "wartości" w obu .append i .val.)

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

Edytuj: Próbując go naśladować ten kod, używam poniższego kodu, gdy strona / formularz jest resetowany. To pole wyboru jest wyposażone w zestaw przycisków radiowych. .focus() był bliżej, ale opcja nie pojawiła się wybrana taka jak robi .selected= "true". Nic nie jest nie tak z moim istniejącym kodem - po prostu staram się nauczyć jQuery.

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

Edytuj: Wybrana odpowiedź była blisko tego, czego potrzebowałem. To działało dla mnie:

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

Ale oba odpowiedzi poprowadziły mnie do mojego ostatecznego rozwiązania ..

1126
Jay Corbett 7 wrzesień 2008, 00:53

22 odpowiedzi

Najlepsza odpowiedź
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
1756
nickf 17 październik 2008, 02:25
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
738
vzwick 8 kwiecień 2012, 14:24

Dlaczego nie używać zwykłego javascript?

document.getElementById("selectID").options.length = 0;
138
Anand 14 luty 2014, 08:50

Jeśli Twoim celem jest usunięcie wszystkich opcji z wybranej z wyjątkiem pierwszego (zazwyczaj "proszę wybrać opcję), możesz użyć:

$('#mySelect').find('option:not(:first)').remove();
86
mauretto 27 marzec 2013, 09:56

Miałem błąd w IE7 (działa dobrze w IE6), gdzie korzystanie z powyższych metod jQuery wyczyścić Wybierz w Domu, ale nie na ekranie. Korzystanie z paska narzędzi programistów IE mógłbym potwierdzić, że wybrany został usunięty i miał nowe przedmioty, ale wizualnie wybierz wciąż pokazał stare przedmioty - mimo że nie można wybrać im.

Fix ma zastosowanie standardowych metod / właściwościach DOM (jako oryginał plakatu), aby przejść, a nie jQuery - nadal używając jQuery, aby dodać opcje.

$('#mySelect')[0].options.length = 0;
78
row1 11 styczeń 2010, 09:22

Nie jesteś pewien, co masz na myśli przez "Dodaj jeden i wybierz", ponieważ i tak zostanie wybrany domyślnie. Ale jeśli miałbyś dodać więcej niż jeden, zrobiłoby to więcej sensu. Co powiesz na coś takiego:

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

Odpowiedź na "Edytuj" : Czy możesz wyjaśnić, co rozumiesz przez "To pole wyboru jest wyposażone przez zestaw przycisków radiowych"? Element <select> nie może (legalnie) zawiera elementy <input type="radio">.

41
Heemanshu Bhalla 5 styczeń 2019, 10:33
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;
27
Hayden Chambers 3 czerwiec 2009, 20:48
$("#control").html("<option selected=\"selected\">The Option...</option>");
22
jvarandas 30 marzec 2011, 02:30

Dzięki odpowiedzi, które otrzymałem, udało mi się stworzyć coś takiego jak następujące, co odpowiada moich potrzebach. Moje pytanie było nieco niejednoznaczne. Dzięki za śledzenie. Moim ostatecznym problemem został rozwiązany, włączając "wybrany" w opcji, którą chciałem wybrać.

$(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>
13
Al Foиce ѫ 24 sierpień 2016, 11:41

Wystarczy jeden wiersz, aby usunąć wszystkie opcje z zaznaczenia znacznika, a po dodaniu dowolnych opcji, aby uzyskać drugą linię, aby dodać opcje.

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

$('.ddlsl').append(new Option('Select all', 'all'));
13
Kaushik shrimali 15 wrzesień 2020, 04:17

Znalazłem w sieci coś w rodzaju poniżej. Z tysiącami opcji jak w mojej sytuacji jest to dużo szybciej niż .empty() lub .find().remove() z 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;
}

Więcej informacji Oto.

8
marioosh 8 kwiecień 2015, 09:42

Co powiesz na zmianę HTML do nowych danych.

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

Inny przykład:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');
8
Shiv 1 luty 2016, 15:29

Inny sposób:

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

Zgodnie z tym linkiem są dobre praktyki https://api.jquery.com/select/

8
tuomastik 13 lipiec 2017, 16:49
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

Pierwszy wiersz kodu usunie wszystkie opcje wyboru pola, ponieważ nie wymieniono opcji Znajdź kryteria.

Druga linia kodu doda opcję z określoną wartością ("testvalue") i tekst ("testtext").

7
Dev Chauhan 12 październik 2018, 10:59

Budowanie na odpowiedzi Mauretto, jest to trochę łatwiejsze do czytania i zrozumienia:

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

Aby usunąć wszystkie opcje z wyjątkiem jednej o określonej wartości, możesz użyć tego:

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

Byłoby lepiej, gdyby opcja dodana była już tam.

6
humbads 18 czerwiec 2015, 13:52

Używa jQuery Prop (), aby usunąć wybraną opcję

$('#mySelect option:selected').prop('selected', false);
4
Rahil Wazir 1 luty 2014, 11:27

Zastąpi to istniejące myselect z nowym myselect.

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');
4
Barun 3 sierpień 2015, 07:07

Możesz zrobić po prostu przez zastąpienie HTML

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
4
Nadeem Manzoor 4 październik 2016, 00:07
  • Zapisz wartości opcji do dołączenia do obiektu
  • Wyczyść istniejące opcje w zaznaczeniu znacznika
  • iteruj obiekt listy i dołącz zawartość do zamierzonego znacznika
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>
3
Nifemi Sola-Ojo 3 wrzesień 2018, 11:17

Widziałem ten kod w Select2 - Wyniki rozliczeniowe

$('#mySelect').val(null).trigger('change');
3
michael01angelo 23 kwiecień 2020, 15:29

Mam nadzieję, że będzie działać

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));
1
Md. Russel Hussain 23 październik 2016, 04:06
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('');
0
LN Nitharsan 19 sierpień 2018, 17:38