Question

我有2个选择框。首先，我从项目1中选择一个项目。如果我检查项目2中的checkbox，则项目2中的select box的值应与项目1中的select box相同，但是不行。怎么了？

这是我的代码：

<table>
  <tr>
    <th>Item 1</th>
  </tr>
  <tr>
    <td>
      <select id="item1">
        <option id=1>Banana</option>
        <option id=2>Apple</option>
        <option id=3>Phineapple</option>
      </select>
    </td>
  </tr>

  <tr>

    <th>Item 2</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="chk" />
      <select id="item2">
        <option id=1>Banana</option>
        <option id=2>Apple</option>
        <option id=3>Phineapple</option>
      </select>
    </td>
  </tr>

</table>

Answer 1

在这里简单。试试这个：

$('#chk').change(function(){
  if($(this).is(':checked')){
    $('#item2').val($('#item1').val());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Item 1</th>
  </tr>
  <tr>
    <td>
      <select id="item1">
        <option id=1>Banana</option>
        <option id=2>Apple</option>
        <option id=3>Phineapple</option>
      </select>
    </td>
  </tr>

  <tr>

    <th>Item 1</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="chk" />
      <select id="item2">
        <option id=1>Banana</option>
        <option id=2>Apple</option>
        <option id=3>Phineapple</option>
      </select>
    </td>
  </tr>

</table>

Answer 2

注意：如果要使用Id's作为选项，请尝试添加唯一的Id's，如果您将其复制，则Id's也应使用{{1 }}，您将直接传递数字。如果可能的话，请勿在{{1}}

中使用数字

您可以通过两种方式进行操作，

场景1：

您有两个<option id="1">Banana</option>框和一个Id's。在select框上进行更改，您需要检查checkbox是否已选中，如果选中了复选框，则将first select复制到下面的另一个变量中，

checkbox

Demo

方案2：

如果您想将select box value的状态复制到$("#item1").on('change',function(){ if($("#chk").is(":checked")){ $("#item2").val($(this).val()); } })到另一个，则可以这样做，

first select box value

Answer 3

由于您未指定使用的是Jquery，因此这里提供了一个无效的Javascript解决方案：

let oneSelect = document.getElementById('oneSelect');
let anotherSelect = document.getElementById('anotherSelect');

function checkTheOtherOne(event) {
  let isChecked = event.target.checked;
  if (isChecked && getOneSelectValue() != getAnotherSelectValue()) {
      for (let i = 0; i < anotherSelect.childNodes.length; i++) {
          const option = anotherSelect.childNodes[i];
          if (option.value === getOneSelectValue()) {
              option.selected = true;
              break;
          }
      }
  }

  function getOneSelectValue() {
      return oneSelect.value;
  }

  function getAnotherSelectValue() {
      return anotherSelect.value;
  }
}

<label>
    One select:
    <select id="oneSelect">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</label>


<label>
    <input value="true" type="checkbox" id="checkbox" oninput="checkTheOtherOne(event)">
</label>


<label>
    Another select:
    <select id="anotherSelect">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</label>

正如第一条评论所指出的那样，请记住文档中的id必须是唯一的。

选择框事件

3 个答案: