Mit Kern jQuery, wie Sie alle Optionen eines Auswahlfeldes zu entfernen, dann fügen Sie eine Option und wählen Sie es?
Mein Auswahlfeld ist das folgende.
<Select id="mySelect" size="9"> </Select>
EDIT: Der folgende Code war bei der Verkettung hilfreich. Allerdings hat (im Internet Explorer) .val('whatever')
die hinzugefügte Option nicht ausgewählt. (Ich habe denselben 'Wert' sowohl in .append
als auch in .val
verwendet.)
$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');
EDIT: Um diesen Code zu imitieren, verwende ich den folgenden Code, wenn die Seite/das Formular zurückgesetzt wird. Dieses Auswahlfeld wird durch eine Reihe von Optionsfeldern ausgefüllt. Mit .focus()
war ich näher dran, aber die Option erschien nicht ausgewählt, wie es bei .selected= "true"
der Fall ist. Nichts ist falsch mit meinem bestehenden Code - ich versuche gerade, jQuery zu lernen.
var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";
EDIT: ausgewählte Antwort war nah an dem, was ich brauchte. Dies funktionierte für mich:
$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;
Aber beide Antworten führten mich zu meiner endgültigen Lösung...
$('#mySelect')
.find('option')
.remove()
.end()
.append('<option value="whatever">text</option>')
.val('whatever')
;
Ich bin mir nicht sicher, was Sie mit "einen hinzufügen und auswählen" meinen, da er ohnehin standardmäßig ausgewählt wird. Aber wenn Sie mehr als einen hinzufügen würden, wäre es sinnvoller. Wie wäre es mit etwas wie:
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
Antwort auf "EDIT ": Können Sie klarstellen, was Sie mit "Dieses Auswahlfeld wird durch eine Reihe von Optionsfeldern ausgefüllt" meinen? Ein <select>
-Element kann (rechtlich) keine <input type="radio">
-Elemente enthalten.
Dank der Antworten, die ich erhielt, konnte ich etwas wie das Folgende erstellen, das meinen Bedürfnissen entspricht. Meine Frage war etwas zweideutig. Vielen Dank für die Antworten. Mein letztes Problem wurde gelöst, indem ich "ausgewählt" in die Option einfügte, die ich ausgewählt haben wollte.
$(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>