Miten poistat kaikki valintaruudun vaihtoehdot ja lisäät sitten yhden vaihtoehdon ja valitset sen jQueryn avulla?

Miten voit poistaa kaikki valintaruudun vaihtoehdot jQueryn ytimen avulla, lisätä sitten yhden vaihtoehdon ja valita sen?

Valintaruutuni on seuraava.

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

EDIT: Seuraavasta koodista oli apua ketjuttamisen kanssa. Kuitenkin (Internet Explorerissa) .val('whatever') ei valinnut lisättyä vaihtoehtoa. (Käytin samaa 'arvoa' sekä .append:ssä että .val:ssä.)

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

EDIT: Yritän saada sen jäljittelemään tätä koodia, käytän seuraavaa koodia aina kun sivu/lomake nollataan. Tämä valintaruutu täytetään joukolla valintanappeja. .focus() oli lähempänä, mutta vaihtoehto ei näkynyt valittuna kuten .selected= "true":llä. Olemassa olevassa koodissani ei ole mitään vikaa - yritän vain oppia 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: valittu vastaus oli lähellä sitä, mitä tarvitsin. Tämä toimi minulle:

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

Mutta molemmat vastaukset johtivat minut lopulliseen ratkaisuun...

Reinstate Monica
Muokattu kysymysT33 syyskuu 2019 в 5:34
Ohjelmointi
javascript jquery html-select option
T55 syyskuu 2008 в 8:53
34 näkymät
Ratkaisu
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('text')
    .val('whatever')
;
nickf
Muokattu vastausta T44 lokakuu 2008 в 2:25
Kommentit (8)

En ole aivan varma, mitä tarkoitat "lisää yksi ja valitse se", koska se valitaan joka tapauksessa oletusarvoisesti. Mutta jos lisäisit useamman kuin yhden, siinä olisi enemmän järkeä. Entäpä jotakin seuraavanlaista:

$('select').children().remove();
$('select').append('foo');
$('#foo').focus();

Vastaus kysymykseen "EDIT": Voisitko selventää, mitä tarkoitat "Tämä valintaruutu on täytetty joukolla valintapainikkeita"? Elementti <select> ei voi (laillisesti) sisältää <input type="radio">-elementtejä.

Heemanshu Bhalla
Muokattu vastausta T55 tammikuu 2019 в 10:33
Kommentit (0)

Saamieni vastausten ansiosta pystyin luomaan jotain seuraavan kaltaista, joka sopii tarpeisiini. Kysymykseni oli hieman epäselvä. Kiitos seurannasta. Lopullinen ongelmani ratkaistiin sisällyttämällä "selected" siihen vaihtoehtoon, jonka halusin valituksi.

$(function() {
  $('#mySelect').children().remove().end().append('One 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('One 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 += '' + items[i] + '';
          }
          else {
            options += '' + items[i] + '';
          }
        }
        $('#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>
One<input  name="myRadio" type="radio" value="1"  />
Two<input name="myRadio"  type="radio" value="2" />
<select id="mySelect" size="9">
Al Foиce ѫ
Muokattu vastausta T22 elokuu 2016 в 11:41
Kommentit (0)