使用onclick功能按鈕更改選擇選項下拉列表

Question

我想用一些按鈕更改下拉列表，我嘗試了下面的代碼，但它不像我想要的那樣行事，

如果我點擊按鈕，它會創建一個額外的選項，這沒關系，沒問題，（實際上我想要在三個現有選項之間進行更改，而不是新選項）

通常，如果我直接點擊現有的“選項2”，另一個div元素顯示帶有ajax的text2，但如果我創建一個選定的“選項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：

<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 - 事件，當select更改時調用

使用Javascript：

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

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

嘗試： https ： //jsfiddle.net/otLmwv20/

Answer 2

嗨，如果我理解正確，這里也是你可以做的一個例子：

在你的html代碼中，我使用類來不通過每個元素聲明函數，並且為每個按鈕關聯不同的動作的數據屬性。

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

在JS代碼中非常簡單

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

每次更改選擇選項或單擊其中一個按鈕時，此代碼應刷新div內容，我也明白當用戶單擊按鈕時我不需要創建新選項然后我沒有添加該邏輯，告訴我，如果我理解它正確。

謝謝

Answer 3

我有另一個想法：

有一個刷新鏈接

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

它刷新了預期的div，它工作正常，

當我點擊按鈕1時，它也點擊刷新鏈接，是否可能？