更改选择选项下拉列表与onclick功能按钮

changing select option dropdownlist with onclick function button

本文关键字：onclick 功能 按钮 下拉列表 选择 选项      更新时间：2023-09-26

我想用一些按钮更改下拉列表，我试过下面的代码，但它不像我想要的那样，

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

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

我们有一个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-事件，当选择已更改的时调用

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/

嗨，如果我理解正确的话，这里有一个你也可以做的例子：

在您的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内容，我也知道当用户单击按钮时，你不需要创建新的选项，那么我没有添加这个逻辑，告诉我我是否理解正确。

感谢

我有了另一个想法：

有一个刷新链接

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

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

当我点击按钮1时，它也点击了刷新链接，有可能吗？

相关文章：