在javascript中的两个选择框之间交换所有值[关闭]

Posted 2023-05-09

【中文标题】在javascript中的两个选择框之间交换所有值[关闭]

【英文标题】：swapping all values between two select boxes in javascript [closed]

【发布时间】：2021-03-21 00:37:41

【问题描述】：

我有两个选择 boxex，它们的内容应该由 change 事件交换 所以select_default1 得到select_default2 的内容，反之亦然

<select name="select_default1" class="select_default1">
                    <option value="">choose Columns</option>
      <option value=" 1"> 1</option>
       <option value=" 2"> 2</option>
       <option value=" 3"> 3</option>
       <option value=" 4"> 4</option>
</select>

<select name="select_default1" class="select_default1">
                    <option value="">choose Columns</option>
      <option value=" a"> a</option>
       <option value=" b"> b</option>
       <option value=" c"> c</option>
</select>

我的方法是将每个选择框的值保存到一个数组中

   let default1_array = [];
        $("#id option").each(function()
          default1_array.push( $(this).val());

        );

然后用数组中保存的值更改每个框的值。

如果有办法以更少的步骤完成此任务，我正在徘徊

【问题讨论】：

您当然不仅需要保存值，还需要保存内部文本（如果它们可能不同）

你也没有编写任何方法来保存'select'的'selected'选项

交换应该在什么情况下发生？

所以就个人而言，我建议您至少考虑一下是否希望在交换中保留“已选择”选项，并且您可以通过直接复制来使用 jquery 使整个工作变得相当容易孩子们在

“清洁工”是一个非常主观的描述。请edit您的问题客观地描述“更清洁”对您意味着什么。

【参考方案1】：

这是一个超级简单的例子，它确实保留了选定的元素。我从每个元素中复制子元素，然后清空每个元素并复制其他元素的子元素。然后我复制该值。

$('button').click(function() 
  const oneChildren = $('#1').children();
  const twoChildren = $('#2').children();
  
  const oneValue = $('#1').val();
  const twoValue = $('#2').val();
  
  $('#1').empty().append(twoChildren);
  $('#2').empty().append(oneChildren);
  
  $('#1').val(twoValue);
  $('#2').val(oneValue);
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="1">
  <option value="a">a</option>
  <option value="b">b</option>
</select>

<select name="" id="2">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br/>
<br/>
<button>change</button>