wählen Sie die Option Dropdownlist mit Onclick Funktionstaste Ändern

Question

ich möchte mit einigen Tasten Dropdown-Listen ändern, i dies unter Codes versucht, aber es funktioniert nicht wie zu handeln, was ich will,

wenn ich die Tasten klicken, erstellt es eine extra Option, das ist in Ordnung, kein Problem, (ich will eigentlich zwischen drei bestehenden Option ändern, nicht neue)

normalerweise, wenn ich an die bestehenden „2 Option“ direkt anklicken, ein weiteres div Element zeigt text2 mit ajax, Aber wenn ich eine ausgewählte "Option 2" erstelle, wird das div-Element nicht aktualisiert, nachdem ich zum Aktualisieren geklickt habe, div-Element korrekt angezeigt

<select id="id1"> 
<option value="1">existingshow1</option> 
<option value="2">existingshow2</option> 
<option value="3">existingshow3</option> 
</select> 

<button onclick="myFunction1()">111</button> 
<button onclick="myFunction2()">222</button> 
<button onclick="myFunction3()">333</button> 

<script> 
function myFunction1() { 
    var x = document.createElement("OPTION"); 
    x.setAttribute("value", "1"); 
    var t = document.createTextNode("show1"); 
    x.appendChild(t); 
    document.getElementById("id1").appendChild(x).selected = "true"; 
} 

function myFunction2() { 
    var x = document.createElement("OPTION"); 
    x.setAttribute("value", "2"); 
    var t = document.createTextNode("show2"); 
    x.appendChild(t); 
    document.getElementById("id1").appendChild(x).selected = "true"; 
} 

function myFunction3() { 
    var x = document.createElement("OPTION"); 
    x.setAttribute("value", "3"); 
    var t = document.createTextNode("show3"); 
    x.appendChild(t); 
    document.getElementById("id1").appendChild(x).selected = "true"; 
} 
</script> 

<div></div> 

Answer 1

Wir haben eine html:

<select id="id1" onChange="onChange(this)"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

<button onclick="addOption();">Add option</button> 

Onchange - Ereignis, aufgerufen, wenn select

Javascript geändert:

window.addOption = function(){ 
    var x = document.createElement('option'); 
    x.setAttribute("value", "new value"); 
    var t = document.createTextNode("show1"); 
    x.appendChild(t); 

    var select = document.getElementById("id1"); 
    select.appendChild(x).selected = "true"; 

    // Trigger select change 
    select.onchange(); 
} 

Onchange Rückruf für ausgewählte

window.onChange = function(select){ 
    console.log('Select value is: ', select.value); 
} 

Versuchen: https://jsfiddle.net/otLmwv20/

Answer 2

Ich habe eine andere Idee:

gibt es eine Refresh-Link

<a href="/refresh-div">refresh it</a> 

es refreshs die erwartete div, es funktioniert gut,

, wenn ich auf die Schaltfläche klicken 1, klickt es auch auf den Refresh-Link, ist es möglich?

Answer 3

Hallo, wenn ich hier richtig verstehe, ist ein Beispiel dafür, was man auch tun könnte:

in Ihrem HTML-Code I-Klassen verwenden, um nicht Funktionen deklarieren, indem jedes Element, und die Datenattribute für jede Taste, um verschiedene Aktionen zu verknüpfen .

<select id="id1"> 
<option value="1">existingshow1</option> 
<option value="2">existingshow2</option> 
<option value="3">existingshow3</option> 
</select> 

<button class="buttonAction" data-option="1">111</button> 
<button class="buttonAction" data-option="2">222</button> 
<button class="buttonAction" data-option="3">333</button> 

<div id="idLoadAjax"> 
</div> 

Im Code JS ist ganz einfach

$(document).ready(function() { 
    $('#id1').change(function(){ 
     console.log($(this).val()); 
     loadAjaxContent($(this).val()); 

    }); 

    $('.buttonAction').click(function(){ 
     $('#id1').val($(this).data('option')); 
     console.log($(this).data('option'));  
     loadAjaxContent($(this).data('option')); 
    }); 
}); 

function loadAjaxContent(optionId) { 
    $('#idLoadAjax').text("Hey there: " + optionId); 
    //$('#idLoadAjax').load(URL); 
} 

Dieser Code sollte Ihre div Inhalt für jedes Mal, wenn Sie ändern Ihre wählen Sie die Option, oder klicken Sie auf eine der Schaltflächen aktualisieren, ich verstehe Sie auch zu schaffen brauchen nicht Neue Optionen, wenn der Benutzer auf die Schaltflächen klickt, dann habe ich diese Logik nicht hinzugefügt, sag mir, ob ich es richtig verstehe.

Danke