当值改变时保持 2 <select> 同步

Question

我有两个 <select> 具有相同的 <option>。

如果用户在第一个中选择一个值，则第二个中的值也应更改以保持两者同步。

这是我到目前为止尝试过的：

function data_copy() {
  if (document.form1.copy[0].checked) {
    for (i = document.form1.state.options.length-1; i >= 0; i--) {
      if (document.form1.state.options[i].selected)
        document.form1.state2.options[i].selected = true;
    }
  } else {
    document.form1.state2.options[0].selected = true;
  }
}

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
  <table width='400' border='0' cellspacing='1' cellpadding='0'>
    <form name=form1 method=post action='http://www.plus2net.com'>

      <tr><td >State</td><td>
        <SELECT NAME="state" onchange="data_copy()">
          <Option value="One">One</option>
          <Option value="Two">Two</option>
          <Option value="Three">Three</option>
          <Option value="Four">Four</option>
        </SELECT>
      </td></tr>

      <tr><td >
      <tr><td >State</td><td>
        <SELECT NAME="state2" >
          <Option value="One">One</option>
          <Option value="Two">Two</option>
          <Option value="Three">Three</option>
          <Option value="Four">Four</option>
        </SELECT>
      </td></tr>

      <tr><td colspan=2 align=center><input type=submit value=Submit>
    </form></td></tr>
  </table>
</body>

Answer 1

$("select[name='state']").on("change",function(){
    $("select[name='state2']").val($("select[name='state']").val());
}

这会将第二个 select 更改为第一个 select 的值，当第一个

的值更改时

Answer 2

一劳永逸，纯 vanillaJS

function data_copy(n)
{
  document.querySelectorAll('[NAME^="state"]').forEach(el=>el.value = document.form1['state'+n].value)
}

<html>
<head>
<title></title>

</head>


<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<table width='400' border='0' cellspacing='1' cellpadding='0'>
<form name=form1 method=post action='http://www.plus2net.com'>


<tr><td >State</td><td><SELECT NAME="state1" onchange="data_copy(1)">
<Option value="One">One</option>
<Option value="Two">Two</option>
<Option value="Three">Three</option>
<Option value="Four">Four</option>

</SELECT>
</td></tr>


<tr><td >State</td><td><SELECT NAME="state2" onchange="data_copy(2)">
<Option value="One">One</option>
<Option value="Two">Two</option>
<Option value="Three">Three</option>
<Option value="Four">Four</option>

</SELECT>
</td></tr>


<tr><td colspan=2 align=center><input type=submit value=Submit></td></tr> </form>
</table>
</body>
</html>

Answer 3

您可以使用 document.getElemebtById, document.querySelector(...) 或任何其他 document.getElement...() 函数获取对 <select> 的引用，并且一旦第一个发生变化，将其值分配给第二个：

const state1 = document.getElementById('state1');
const state2 = document.getElementById('state2');

state1.onchange = function(e) {
    state2.value = e.target.value;
};

此外，您的代码存在多个问题：

<form> 不允许出现在 <table> 中，因此您要么用它包裹整个 table，要么将其放在一个单元格中。在 <table> 元素中，您只能使用 <caption>、<colgroup>、<thead>、<tfoot>、<tbody> 和 <tr>。
未加引号的 HTML 属性也是有效的，但是，如果它们包含不受信任的数据，将更难逃避它们以避免 XSS 攻击。实际上，大多数 HTML 转义工具都会假定使用引号。无论如何，您也应该与此保持一致，所以要么使用双引号、单引号，要么根本不使用引号。
您的 HTML 代码应使用小写字母。虽然浏览器仍然可以理解大写字母，但由于小写字母的可读性更好，因此习惯使用小写字母。这来自需要小写的旧 xHTML。
您还应该避免使用事件属性，以保持您的表示和逻辑分离，并且还因为内联元素范围的解析方式。

另一个答案对此有很好的解释：onclick="" vs event handler
您不应使用 HTML 属性来设置元素的样式。这是 CSS 的担忧。

实际上，bgcolor, text, link...在HTML5中均不受支持。
最后，如果你使用 <table> 元素只是为了布局，没有任何语义意义，那么你应该使用其他元素代替，也许 <ul> 和 <li> 或只是 <div>，并使用 CSS.
定位它们
也许 Flexbox 可以派上用场，尽管 position、float 和 display 对于您的用例应该绰绰有余。

总的来说，它应该是这样的：

const state1 = document.getElementById('state1');
const state2 = document.getElementById('state2');

state1.onchange = function(e) {
  state2.value = e.target.value;
};

body {
  font-family: sans-serif;
}

table {
  background: #FFF;
  color: #000;
  width: 400px;
  border: none;
  border-collapse: collapse;
}

td {
  padding: .25rem;
}

select {
  width: 100%;
}

.legend {
  width: 50px;
  text-align: right;
  text-transform: uppercase;
  font-size: .75rem;
}

.button {
  width: 100%;
  border: none;
  background: #FFF;
  padding: .5rem;
  border-radius: 2px;
  color: #000;
  text-transform: uppercase;
  font-size: .75rem;
  margin: 1rem 0 0;
  box-shadow: 0 0 1rem rgba(0, 0, 0, .25);
  transition: box-shadow ease-in .125s;
}

.button:hover {
  box-shadow: 0 0 .5rem rgba(0, 0, 0, .25);
}

<form
  name="form"
  method="post"
  action="http://www.plus2net.com">

  <table>
    <tr>
      <td class="legend">State</td>
      <td>
        <select name="state" id="state1">
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
          <option value="Four">Four</option>
        </select>
      </td>
    </tr>
    
    <tr>
      <td class="legend">State</td>
      <td>
        <select name="state2" id="state2">
        <option value="One">One</option>
        <option value="Two">Two</option>
        <option value="Three">Three</option>
        <option value="Four">Four</option>
        </select>
     </td>
   </tr>
   
    <tr>
      <td colspan="2">
        <input type="submit" value="submit" class="button">
      </td>
    </tr>
  </table>
  
</form>

当值改变时保持 2 <select> 同步

Keep 2 <select> in sync when value changes

html

javascript

html-select

drop-down-menu