Dynamische javascript-dropdown auswählen

Dieser war interessant. In einer select-dropdown-versuchen, Sie nicht zu verwenden, jQuery (mit Ausnahme der Lockerung, einige meiner Schmerzen auf Erholung), ich lief in ein Problem, das nicht richtig lassen allen aktuellen Browsern fangen Sie die richtige option ausgewählt. Hier ist mein code für die Seite ein, stellt das Problem (denken Sie daran, kein jQuery unbedingt lösen Problem, aber mehr oder weniger nur um mir zu sagen, was ich falsch mache.

Dieser hat mich ratlos.

    <html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

<div id="select-holder" />
<input id="some-button" type="button">

<script type="text/javascript">

$("#some-button").click(function(){

    var select_element = document.createElement('select');
    select_element.setAttribute("id", "some-id");
    select_element.setAttribute("name", "some-name");

    var options = new Array();
    for ( var i = 0; i < 3; i++ ){
        options.push(new Option("Option " + i, "Value" + i, false, false));
    }
    options[1].setAttribute("selected", "selected");

    for ( var option in options ){
        select_element.appendChild(options[option]);
    }

    $("#select-holder").append(select_element);
});

</script>
</body>
</html>

Den html dieser erstellt ist:

    <select id="some-id" name="some-name">
    <option value="Value0">Option 0</option>
    <option value="Value1" selected="selected">Option 1</option>
    <option value="Value2">Option 2</option>
</select>

Aber die Anomalie ist hier, dass (im firefox zumindest), wird die ausgewählte option endet als Option ist 0, was nicht der gewählte DOM-element. Im IE6, diese select-dropdown funktioniert überhaupt nicht.

Es ist eine Alternative Methode, die funktioniert, die umfasst piecing die Optionen manuell, das funktioniert in allen Browsern, die ich getestet habe.

InformationsquelleAutor Jeff Ancel | 2010-09-22

  1. 4

    Eine kleine änderung gemacht, es funktioniert bei mir in Firefox:

    ...
//options[1].setAttribute("selected", "selected");
options[1].selected = true;
...

    Ich bin die Manipulation des DOM-element die Attribute direkt. Nicht sicher, warum deine Methode nicht funktioniert. Vielleicht sollte man beide Linien, so dass der generierte HTML-Code hat die selected = "selected".

    IE6 funktioniert nicht, aber nicht sicher, ob ich Pflege. Wenn Sie irgendwelche Vorschläge haben, für den IE6, obwohl, würde ich schätzen. Dies funktioniert perfekt in Firefox.

    InformationsquelleAutor Cᴏʀʏ

  2. 2

    einige alte thread - aber probieren Sie etwas wie dieses:

    var idx=0;
while(obj.options[idx]) {
  if(obj.options[idx].value==value) obj.options[idx].setAttribute('selected',true);
  else  obj.options[idx].removeAttribute('selected');
  idx++;
}

    InformationsquelleAutor CodeSchiDDer

  3. 1

    SelectedIndex verwenden, um den gewählten index einer ausgewählten Objekt.
    options.selectedIndex = 1;

    InformationsquelleAutor Randy the Dev

  4. 0

    Hier ist der funktionierende code, das scheint wie mehr wie ein Hack!

    <html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

<div id="select-holder" />
<input id="some-button" type="button">

<script type="text/javascript">

$("#some-button").click(function(){

    var select_element = document.createElement('select');
    select_element.setAttribute("id", "some-id");
    select_element.setAttribute("name", "some-name");


    for ( var i = 0; i < 3; i++ ){
        var option_element = document.createElement('option');
        option_element.setAttribute('value', "Value" + i);
        option_element.appendChild( document.createTextNode( "Option " + i ) );
        if (i == 1){
            option_element.setAttribute("selected", "selected");
        }
        select_element.appendChild(option_element);
    }

    $("#select-holder").append(select_element);
});

</script>
</body>
</html>

    InformationsquelleAutor Jeff Ancel

  5. 0
    options[1].setAttribute("selected", "selected");

    ist wahrscheinlich, wo dein Problem liegt. Die Ausgabe, die Sie bekommen, ist:

    <option value="Value1" selected="selected">Option 1</option>

    und der standard ist:

    <option value="Value1" selected>Option 1</option>

    Können Sie in der Lage zu tun:

    options[1].selected = true;
    dieser funktioniert.

    InformationsquelleAutor Purge

Schreibe einen Kommentar