js选择并转移导航菜单示例代码

下面是js选择并转移导航菜单的攻略。首先我们需要明确一下我们需要做的事情，即从一个导航菜单中选择若干个元素，并将这些元素转移至另一个导航菜单中。具体实现步骤如下：

1. 准备工作

首先在HTML文档中，我们需要准备两个导航菜单的容器元素，以及一个按钮元素用于触发选中操作。例如，我们可以按照以下代码编写容器元素：

<div class="container">
  <h2>可选菜单</h2>
  <ul id="menu1">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
    <li>菜单项4</li>
  </ul>

  <button id="select-btn">选择</button>

  <h2>已选菜单</h2>
  <ul id="menu2"></ul>
</div>

2. 实现选择操作

接下来就可以使用JavaScript来实现选择操作了。我们可以通过使用querySelectorAll选择指定元素来获取所有可选的菜单项，然后使用forEach遍历所有菜单项，在遍历的过程中检查每个菜单项是否被选中。例如，我们可以按照以下代码实现选择操作：

const selectBtn = document.getElementById('select-btn');

selectBtn.addEventListener('click', function() {
  const menu1Items = document.querySelectorAll('#menu1 li');
  menu1Items.forEach(function(item) {
    if (item.classList.contains('selected')) {
      //已选中
      item.classList.remove('selected');
      menu2.removeChild(item);
    } else {
      //未选中
      item.classList.add('selected');
      menu2.appendChild(item.cloneNode(true));
    }
  });
});

在上面的代码中，我们首先获取到了选择按钮的实例，并为它添加了一个点击事件的监听器。点击按钮后，我们使用querySelectorAll选择菜单中所有项，并对每个菜单项进行遍历。在遍历的过程中，我们首先检查菜单项是否被选中（即是否带有selected类），如果被选中，就从容器2中将其删除；如果未被选中，就将其加入到已选菜单中。

3. 示例说明

下面是两个基于上面的代码实现的示例：

示例1

在该示例中，我们可以选择多个菜单项，在选择时，选中的项会自动转移到已选菜单中。如果原来选择的项不再需要选择，则可以再次点击相应项，取消它的选择，并从已选菜单中移除。

<div class="container">
  <h2>可选菜单</h2>
  <ul id="menu1">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
    <li>菜单项4</li>
  </ul>

  <button id="select-btn">选择</button>

  <h2>已选菜单</h2>
  <ul id="menu2"></ul>
</div>

<script>
const selectBtn = document.getElementById('select-btn');
const menu2 = document.getElementById('menu2');

selectBtn.addEventListener('click', function() {
  const menu1Items = document.querySelectorAll('#menu1 li');
  menu1Items.forEach(function(item) {
    if (item.classList.contains('selected')) {
      //已选中
      item.classList.remove('selected');
      menu2.removeChild(item);
    } else {
      //未选中
      item.classList.add('selected');
      menu2.appendChild(item.cloneNode(true));
    }
  });
});
</script>

示例2

在该示例中，我们为每个菜单项添加了一个input元素，并在选择时记录每个输入框的值。当用户点击选择按钮时，我们将已选项的值输出到控制台中，以便后续处理。

<div class="container">
  <h2>可选菜单</h2>
  <ul id="menu1">
    <li>
      <label><input type="checkbox" value="1"> 菜单项1</label>
    </li>
    <li>
      <label><input type="checkbox" value="2"> 菜单项2</label>
    </li>
    <li>
      <label><input type="checkbox" value="3"> 菜单项3</label>
    </li>
    <li>
      <label><input type="checkbox" value="4"> 菜单项4</label>
    </li>
  </ul>

  <button id="select-btn">选择</button>

  <h2>已选菜单</h2>
  <ul id="menu2"></ul>
</div>

<script>
const selectBtn = document.getElementById('select-btn');

selectBtn.addEventListener('click', function() {
  const menu1Items = document.querySelectorAll('#menu1 li');
  const selectedValues = [];

  menu1Items.forEach(function(item) {
    const checkbox = item.querySelector('input[type="checkbox"]');
    if (checkbox.checked) {
      selectedValues.push(checkbox.value);
    }
  });

  console.log(selectedValues);
});
</script>

在这个示例中，我们为每个菜单项添加了一个input元素，用于记录是否被选中。在选择时，我们遍历所有菜单项，查找每个菜单项对应的input元素是否被选中。如果被选中，则将对应的值（即菜单项的值）添加到已选值的数组中。最后，我们将已选的值输出到控制台中。