Javascript 使用onclick功能按钮更改选择选项dropdownlist

我想用一些按钮更改下拉列表， 我在下面的代码中尝试了这个，但它的行为与我想要的不一样

如果我点击按钮，它会创建一个额外的选项，这没关系，没问题， （实际上，我希望在三个现有选项之间进行更改，而不是新选项）

通常，如果我直接点击现有的“选项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>

现有显示1
现有节目2
现有节目3
111
222
333
函数myFunction1（）{
var x=document.createElement（“选项”）；
x、 setAttribute（“值”、“1”）；
var t=document.createTextNode（“show1”）；
x、 儿童（t）；
document.getElementById（“id1”）.appendChild（x）.selected=“true”；
}
函数myFunction2（）{
var x=document.createElement（“选项”）；
x、 setAttribute（“值”、“2”）；
var t=document.createTextNode（“show2”）；
x、 儿童（t）；
document.getElementById（“id1”）.appendChild（x）.selected=“true”；
}
函数myFunction3（）{
var x=document.createElement（“选项”）；
x、 setAttribute（“值”、“3”）；
var t=document.createTextNode（“show3”）；
x、 儿童（t）；
document.getElementById（“id1”）.appendChild（x）.selected=“true”；
}

我们有一个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>

select的Onchange回调

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

试试看：

我还有一个想法：

有一个刷新链接

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

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

当我点击按钮1时，它也会点击刷新链接，

---

有可能吗？

嗨，如果我理解正确，这里有一个例子，说明你也可以做什么：

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

这段代码应该会在每次更改选择选项或单击其中一个按钮时刷新您的div内容。我也知道，当用户单击按钮时，您不需要创建新选项。然后我没有添加该逻辑，请告诉我是否理解正确

---

谢谢

div在哪里？您是如何添加eventlistener的？在selects之后是div，但div元素是使用buddypress活动创建的。事实上，我讨厌下拉列表，我想要按钮，我不知道我如何改变，这里有一个例子，但我很快删除它；抱歉，它在JSFIDLE中工作，我明白了，但它对我不起作用。它不刷新，它也是另一种语言，但是你可以在内容中间看到一个链接（YNELE），在RSS按钮附近，一切都在这里，你可以编程点击这个按钮，你需要得到元素，然后使用元素。点击（）：例如：代码> var a=文档.GETelEnMyBID（‘ButoNoToID’）；a、 单击（）好的，它现在工作得非常好，非常感谢，我需要尽快学习javascript。如果你理解正确，它也工作得很好。。。太感谢你了

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

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