私はコードの下にこれを試してみましたが、私は、ボタンをクリックした場合、それは、私が欲しいもののよう</p> <p>働くdoes notの 、私はいくつかのボタンとドロップダウンリストを変更したいのonclick機能ボタン

Question

と選択オプションのドロップダウンリストを変更し、それが余分を作成し、オプション、これはokです、問題はない、 （実際に私は既存の3つのオプションではなく、新しいものとの変化を望む）

通常、私は、既存の「オプション2」に直接クリックすると、別のdiv要素は、Ajaxでテキスト2を示し、 しかし、私が選択した "オプション2"を作成した場合、divエレメントはリフレッシュするためにクリックした後、正しく表示されるdivエレメントをリフレッシュしません。

<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

私たちは、htmlの持っている： - ：選択

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

0123用

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コールバック

<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選択はJavascript

を変更したときに呼び出されるイベントを、

試してみてください。

リフレッシュリンクそれは期待のdivは、それが正常に動作しますrefreshs

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

、

私はボタンをクリックしてくださいあり：https://jsfiddle.net/otLmwv20/

Answer 2

iは、他のアイデアを得ました1、それはまた、リフレッシュリンクにクリック 可能ですか？

Answer 3

こんにちは、私はここに正しく理解すれば、あなたも何ができるかの例です：私は各要素によって宣言機能をいけないためにクラスを使用するHTMLコードで

、およびデータは、各ボタンのさまざまなアクションのために関連付けることを属性。 JSコードで

<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> 

このコードは、あなたの選択オプションを変更したり、ボタンのいずれかをクリックするたびのためのあなたのdivコンテンツをリフレッシュする必要があり

$(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); 
} 

非常に簡単です、私はまた、あなたが作成する必要がいけない理解ユーザーがボタンをクリックしたときに新しいオプションが表示され、そのロジックが追加されず、正しく理解すれば教えてください。

ありがとうございました