Question

我正在尝试创建一个按钮，用于更改下拉列表中的所选选项。

代码看起来像这样：

<select class="select1">
<option value="1" id="firstOption">First Option</option>
<option value="2" id="secondOption">Second Option</option>
</select>

<select class="select2">
<option value="1" id="firstOption">First Option</option>
<option value="2" id="seconOption">Secon Option</option>
</select>

我的目标是制作一个按钮，用于切换两个<select>中的所选选项。有很多不同的选项，所以如果我能告诉JS或jQuery设置var等于所选元素的value或id，我会很棒，然后使用带有var的id或值的选项切换所选选项，以便select1具有选项，select2具有之前，选择，反之亦然。

两个<select>具有完全相同的选项。

Answer 1

这是您问题的快速解决方案

<button onclick="setOptions()"></button>

function setOptions() {
    var a = $(".select1").val();
    var b = $(".select2").val();

    if((a==1 && b==2) || (a==2&&b==1))
    {
      console.log("true");
      $(".select1").val("1");
      $(".select2").val("2");
    }
    else
      console.log("false");
  }

但是当H H评论时，为什么你想要一个按钮来选择所选的选项呢？

Answer 2

所以我在经过多次摆弄之后找到了答案（我在jquery非常糟糕）：

HTML

<li class="li1">
<select class="select1">
<option value="1">First Option</option>
<option value="2">Second Option</option>
</select>
</li>
<li class="li2">
<select class="select2">
<option value="1">First Option</option>
<option value="2">Second Option</option>
</select>
</li>
<button onclick="switchOptions()"></button>

JS

function switchOptions(){ 
        var chFrom = $(".select1").find(":selected").val();
        var chTo = $(".select2").find(":selected").val();
        $("li.li1 select").val(chTo);
        $("li.li2 select").val(chFrom);
    }

感谢您的尝试： - ）

切换两个html选择选项元素的值

2 个答案: