it-swarm.com.de

set Option "Ausgewähltes" Attribut aus dynamisch erstellter Option

Ich habe eine dynamisch erstellte Auswahloption mit einer Javascript-Funktion. Das Auswahlobjekt ist

<select name="country" id="country">
</select>

wenn die js-Funktion ausgeführt wird, ist das Objekt "country"

<select name="country" id="country">
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    ...
    <option value="ID">Indonesia</option>
    ...
    <option value="ZW">Zimbabwe</option>
</select>

und "Indonesien" als standardmäßig ausgewählte Option anzeigen. Hinweis: Diese Option enthält kein selected="selected"-Attribut.

dann muss ich das selected="selected"-Attribut auf "Indonesia" setzen, und ich benutze das 

var country = document.getElementById("country");
country.options[country.options.selectedIndex].setAttribute("selected", "selected");

mit Firebug kann ich feststellen, dass die Option "Indonesien" so ist

<option value="ID" selected="selected">Indonesia</option>

es schlägt jedoch in IE fehl (getestet in IE 8).

und dann habe ich es mit jQuery versucht 

$( function() {
    $("#country option:selected").attr("selected", "selected");
});

es fällt sowohl in FFX als auch im IE aus.

Ich brauche die "Indonesien" -Option, um das selected="selected"-Attribut zu haben. Wenn ich auf "Zurücksetzen" klicke, wird erneut "Indonesien" ausgewählt.

das Ändern der js-Funktion zum dynamischen Erstellen von "Länder" -Optionen ist keine Option. Die Lösung muss sowohl in FFX als auch im IE funktionieren.

danke dir

59
tsurahman

Gute Frage. Sie müssen den HTML-Code selbst ändern, anstatt sich auf die DOM-Eigenschaften zu verlassen.

var opt = $("option[val=ID]"),
    html = $("<div>").append(opt.clone()).html();
html = html.replace(/\>/, ' selected="selected">');
opt.replaceWith(html);

Der Code greift das Optionselement für Indonesien, kopiert es und fügt es in ein neues div (nicht im Dokument) ein, um den vollständigen HTML-String abzurufen: <option value="ID">Indonesia</option>.

Anschließend wird ein String ersetzt, um das Attribut selected="selected"als String hinzuzufügen, bevor die ursprüngliche Option durch diese neue ersetzt wird.

Ich habe es auf IE7 getestet. Sehen Sie es mit der Reset-Taste hier richtig: http://jsfiddle.net/XmW49/

26
David Tang

Du denkst darüber nach:

var country = document.getElementById("country");
country.options[country.options.selectedIndex].selected = true;
99
furtive

Anstatt den HTML-Code selbst zu ändern, legen Sie einfach den Wert fest, für den Sie ein Auswahlelement verwenden möchten:

$(function() {
    $("#country").val("Indonesia");
});
21
antonjs
// get the OPTION we want selected
var $option = $('#SelectList').children('option[value="'+ id +'"]');
// and now set the option we want selected
$option.attr('selected', true);​​
11
corradio

So viele falsche Antworten!

Verwenden Sie die folgenden Eigenschaften, um den Wert anzugeben, auf den ein Formularfeld beim Zurücksetzen des Formulars zurückgesetzt werden soll:

  • Ankreuzfeld oder Optionsfeld: defaultChecked
  • Alle anderen <input> Steuerelemente: defaultValue
  • Option in einer Dropdown-Liste: defaultSelected

So legen Sie die aktuell ausgewählte Option als Standard fest:

var country = document.getElementById("country");
country.options[country.selectedIndex].defaultSelected = true;

Es kann eine gute Idee sein, den Wert defaultSelected für jede Option festzulegen, falls zuvor eine Option festgelegt wurde:

var country = document.getElementById("country");
for (var i = 0; i < country.options.length; i++) {
    country.options[i].defaultSelected = i == country.selectedIndex;
}

Wenn das Formular jetzt zurückgesetzt wird, ist die ausgewählte Option die von Ihnen angegebene.

10
gilly3

Sie möchten das selectedIndex-Attribut des Auswahlfelds festlegen.

country.options.selectedIndex = index_of_indonesia;

Das Ändern des 'ausgewählten' Attributs funktioniert im IE normalerweise nicht. Wenn Sie wirklich das beschriebene Verhalten wünschen, sollten Sie eine benutzerdefinierte JavaScript-Rücksetzfunktion schreiben, um alle anderen Werte im Formular auf ihre Standardwerte zurückzusetzen.

9
Sam Dufel

Dies funktioniert in FF, IE9

var x = document.getElementById("country").children[2];
x.setAttribute("selected", "selected");
6
Alexi
// Get <select> object
var sel = $('country');

// Loop through and look for value match, then break
for(i=0;i<sel.length;i++) { if(sel.value=="ID") { break; } }

// Select index 
sel.options.selectedIndex = i;

Begitu Loh.

2
Ben

Stellen Sie fest, dass dies eine alte Frage ist, aber mit der neueren Version von JQuery können Sie jetzt Folgendes tun:

$("option[val=ID]").prop("selected",true);

Dies bewirkt dasselbe wie die ausgewählte Antwort von Box9 in einer Zeile.

1
Dustin Parham

Das sollte funktionieren. 

$("#country [value='ID']").attr("selected","selected");

Wenn Sie Funktionsaufrufe an das Element gebunden haben, folgen Sie ihm einfach etwas 

$("#country").change();
1
kstl
select = document.getElementById('selectId');
var opt = document.createElement('option');
    opt.value = 'value';
    opt.innerHTML = 'name';
    opt.selected = true;
    select.appendChild(opt);
1

Sie können alle Optionswerte durchsuchen, bis der richtige gefunden wird. 

var defaultVal = "Country";
$("#select").find("option").each(function () {

    if ($(this).val() == defaultVal) {

        $(this).prop("selected", "selected");
    }
});
1
mark.inman

Ich habe so etwas mit der Funktion $(...).val() ausprobiert, aber die Funktion war nicht vorhanden. Es stellt sich heraus, dass Sie den Wert manuell wie für einen <input> einstellen können:

// Set value to Indonesia ("ID"):
$('#country').value = 'ID'

... und es wird automatisch im select aktualisiert. Funktioniert mindestens mit Firefox. Vielleicht möchten Sie es in den anderen ausprobieren.

0
Hippo

Die Ideen auf dieser Seite waren hilfreich, doch wie immer war mein Szenario anders. Im modalen Bootstrap/Express-Knoten js/aws beanstalk hat dies für mich funktioniert:

var modal = $(this);
modal.find(".modal-body select#cJourney").val(vcJourney).attr("selected","selected");

Wo mein select ID = "cJourney" und der Dropdown-Wert in der Variablen gespeichert wurden: vcJourney

0
David White

Um die Eingabeoption zur Laufzeit einzustellen, setzen Sie den 'geprüften' Wert. (auch wenn es keine Checkbox ist)

elem.checked=true;

Dabei ist elem ein Verweis auf die auszuwählende Option.

Also für die obige Ausgabe:

var country = document.getElementById("country");
country.options[country.options.selectedIndex].checked=true;

Das funktioniert für mich, auch wenn die Optionen nicht in einem eingebunden sind.

Wenn alle Tags denselben Namen haben, sollten sie die Markierung aufheben, wenn das neue markiert ist.

0
grigb

Option defaultSelected festlegen

HTMLOptionElement.defaultSelected = true;     // JS
$('selector').prop({defaultSelected: true});  // jQuery  

HTMLOptionElement MDN

Wenn das SELECT-Element bereits zum Dokument hinzugefügt wurde (statisch oder dynamisch), setzen Sie eine Option auf Attribut -selected und machen Sie es zu survive einer HTMLFormElement.reset() - defaultSelected wird verwendet:

const EL_country = document.querySelector('#country');
EL_country.value = 'ID';   // Set SELECT value to 'ID' ("Indonesia")
EL_country.options[EL_country.selectedIndex].defaultSelected = true; // Add Attribute selected to Option Element

document.forms[0].reset(); // "Indonesia" is still selected
<form>
  <select name="country" id="country">
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    <option value="HR">Croatia</option>
    <option value="ID">Indonesia</option>
    <option value="ZW">Zimbabwe</option>
  </select>
</form>

Das Obige funktioniert auch, wenn Sie die Optionen erstellen dynamisch, und als (erst danach) möchten Sie eine Option auf defaultSelected setzen.

const countries = {
  AF: 'Afghanistan',
  AL: 'Albania',
  HR: 'Croatia',
  ID: 'Indonesia',
  ZW: 'Zimbabwe',
};

const EL_country = document.querySelector('#country');

// (Bad example. Ideally use .createDocumentFragment() and .appendChild() methods)
EL_country.innerHTML = Object.keys(countries).reduce((str, key) => str += `<option value="${key}">${countries[key]}</option>`, ''); 

EL_country.value = 'ID';
EL_country.options[EL_country.selectedIndex].defaultSelected = true;

document.forms[0].reset(); // "Indonesia" is still selected
<form>
  <select name="country" id="country"></select>
</form>

Option gets Attribute selected by using defaultSelected

Option zum Standard machenAusgewählt, während Optionen dynamisch erstellt werden

Verwenden Sie den Konstruktor Option()), um eine Option selectedbeim Auffüllen des SELECT-Elements zu erstellen MDN

var optionElementReference = new Option(text, value, defaultSelected, selected);

const countries = {
  AF: 'Afghanistan',
  AL: 'Albania',
  HR: 'Croatia',
  ID: 'Indonesia',     // <<< make this one defaultSelected
  ZW: 'Zimbabwe',
};

const EL_country = document.querySelector('#country');
const DF_options = document.createDocumentFragment();

Object.keys(countries).forEach(key => {
  const isIndonesia = key === 'ID';  // Boolean
  DF_options.appendChild(new Option(countries[key], key, isIndonesia, isIndonesia))
});

EL_country.appendChild(DF_options);

document.forms[0].reset(); // "Indonesia" is still selected
<form>
  <select name="country" id="country"></select>
</form>

In der obigen Demo wird Document.createDocumentFragment verwendet, um das Rendern von Elementen im DOM in einer Schleife zu verhindern. Stattdessen wird das Fragment (das alle Optionen enthält) nur einmal an die Auswahl angehängt.


SELECT.value vs. OPTION.setAttribute vs. OPTION.selected vs. OPTION.defaultSelected

Obwohl einige (ältere) Browser das selected -Attribut der OPTION als "string" -Zustand interpretieren, wird die WHATWG-HTML-Spezifikation verwendet  html.spec.whatwg.org Geben Sie an, dass es einen Booleschen Wert darstellen soll selectedness

Die Auswahl eines Optionselements ist ein Boolescher Zustand, anfänglich falsch. Sofern nicht anders angegeben, muss beim Erstellen des Elements seine Auswahl auf true festgelegt werden, wenn das Element ein ausgewähltes Attribut aufweist.
html.spec.whatwg.org - Option selectedness

man kann richtig ableiten, dass nur der Name selected in <option value="foo" selected> ausreicht, um einen Wahrheitszustand festzulegen.


Vergleichstest der verschiedenen Methoden

const EL_select = document.querySelector('#country');
const TPL_options = `
  <option value="AF">Afghanistan</option>
  <option value="AL">Albania</option>
  <option value="HR">Croatia</option>
  <option value="ID">Indonesia</option>
  <option value="ZW">Zimbabwe</option>
`;

// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver
const mutationCB = (mutationsList, observer) => {
  mutationsList.forEach(mu => {
    const EL = mu.target;
    if (mu.type === 'attributes') {
      return console.log(`* Attribute ${mu.attributeName} Mutation. ${EL.value}(${EL.text})`);
    }
  });
};

// (PREPARE SOME TEST FUNCTIONS)

const testOptionsSelectedByProperty = () => {
  const test = 'OPTION with Property selected:';
  try {
    const EL = [...EL_select.options].find(opt => opt.selected);
    console.log(`${test} ${EL.value}(${EL.text}) PropSelectedValue: ${EL.selected}`);
  } catch (e) {
    console.log(`${test} NOT FOUND!`);
  }
} 

const testOptionsSelectedByAttribute = () => {
  const test = 'OPTION with Attribute selected:'
  try {
    const EL = [...EL_select.options].find(opt => opt.hasAttribute('selected'));
    console.log(`${test} ${EL.value}(${EL.text}) AttrSelectedValue: ${EL.getAttribute('selected')}`);
  } catch (e) {
    console.log(`${test} NOT FOUND!`);
  }
} 

const testSelect = () => {
  console.log(`SELECT value:${EL_select.value} selectedIndex:${EL_select.selectedIndex}`);
}

const formReset = () => {
  EL_select.value = '';
  EL_select.innerHTML = TPL_options;
  // Attach MutationObserver to every Option to track if Attribute will change
  [...EL_select.options].forEach(EL_option => {
    const observer = new MutationObserver(mutationCB);
    observer.observe(EL_option, {attributes: true});
  });
}

// -----------
// LET'S TEST! 

console.log('\n1. Set SELECT value');
formReset();
EL_select.value = 'AL'; // Constatation: MutationObserver did NOT triggered!!!!
testOptionsSelectedByProperty();
testOptionsSelectedByAttribute();
testSelect();

console.log('\n2. Set HTMLElement.setAttribute()');
formReset();
EL_select.options[2].setAttribute('selected', true); // MutationObserver triggers
testOptionsSelectedByProperty();
testOptionsSelectedByAttribute();
testSelect();

console.log('\n3. Set HTMLOptionElement.defaultSelected');
formReset();
EL_select.options[3].defaultSelected = true; // MutationObserver triggers
testOptionsSelectedByProperty();
testOptionsSelectedByAttribute();
testSelect();

console.log('\n4. Set SELECT value and HTMLOptionElement.defaultSelected');
formReset();
EL_select.value = 'ZW'
EL_select.options[EL_select.selectedIndex].defaultSelected = true; // MutationObserver triggers
testOptionsSelectedByProperty();
testOptionsSelectedByAttribute();
testSelect();

/* END */
console.log('\n*. Getting MutationObservers out from call-stack...');
<form>
  <select name="country" id="country"></select>
</form>

Obwohl der Test 2. mit .setAttribute() zunächst die beste Lösung zu sein scheint, da sowohl die Elementeigenschaft als auch das Attribut unisono sind, kann dies zu Verwirrung führen, insbesondere weil .setAttribute erwartet zwei Parameter:

EL_select.options[1].setAttribute('selected', false);
// <option value="AL" selected="false"> // But still selected!

wird tatsächlich die Option machen ausgewählt

Sollte man .removeAttribute() oder vielleicht .setAttribute('selected', ???) auf einen anderen Wert setzen? Oder sollte man den Zustand mit .getAttribute('selected') oder mit .hasAttribute('selected') auslesen?

Stattdessen ergibt Test 3. (und 4.) mit defaultSelected das erwartete Ergebnis:

  • Attributeselected als benanntes Selectedness state.
  • Propertyselected für das Element Object mit einem Boolean value.
0
Roko C. Buljan