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 - 事件，在选择更改时调用

使用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时，它也会点击刷新链接，有可能吗？

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

3 个答案: