关键词

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元素是否被选中。如果被选中,则将对应的值(即菜单项的值)添加到已选值的数组中。最后,我们将已选的值输出到控制台中。

本文链接:http://task.lmcjl.com/news/10200.html

展开阅读全文