普通网友 2023-11-05 12:02 采纳率: 0%
浏览 2

永洪JS问题：当下拉框全选只出现基地，当下拉框只选择一个基地出现该基地和该基地目标值

永洪怎么通过JS实现：当下拉框全选只出现基地，当下拉框只选择一个基地出现该基地和该基地目标值：
字段中包含基地、目标值

img

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-11-05 17:40
    关注

    【以下回答由 GPT 生成】

    问题解答

    首先，我们需要创建一个下拉框元素，并添加一个监听事件，以便在选择发生变化时执行相应的操作。在监听事件中，我们可以通过遍历所有选项，并判断选中的选项个数来确定需要显示或隐藏的目标值。

    下面是具体的解决方案：

    <!DOCTYPE html>
<html>
<head>
<script>
function displayTargets() {
  var baseSelect = document.getElementById("baseSelect");
  var targetElements = document.getElementsByClassName("target");

  // 获取选中的基地数量
  var selectedCount = 0;
  for (var i = 0; i < baseSelect.options.length; i++) {
    if (baseSelect.options[i].selected) {
      selectedCount++;
    }
  }

  // 如果只选择了一个基地
  if (selectedCount === 1) {
    var selectedBase = baseSelect.options[baseSelect.selectedIndex].value;
    for (var i = 0; i < targetElements.length; i++) {
      if (targetElements[i].dataset.base === selectedBase) {
        targetElements[i].style.display = "block";
      } else {
        targetElements[i].style.display = "none";
      }
    }

  } else { // 如果选择了多个基地或没有选择基地
    for (var i = 0; i < targetElements.length; i++) {
      targetElements[i].style.display = "block";
    }
  }
}
</script>
</head>
<body>

<select id="baseSelect" multiple onchange="displayTargets()">
  <option value="base1">基地1</option>
  <option value="base2">基地2</option>
  <option value="base3">基地3</option>
  <!-- 添加更多基地选项 -->
</select>

<div class="target" data-base="base1" style="display: none;">基地1 对应的目标值</div>
<div class="target" data-base="base2" style="display: none;">基地2 对应的目标值</div>
<div class="target" data-base="base3" style="display: none;">基地3 对应的目标值</div>
<!-- 添加更多目标值对应的显示元素 -->

</body>
</html>

    上述代码创建了一个下拉框元素，以及包含基地和目标值的显示元素。通过监听下拉框的 onchange 事件，当选择发生变化时调用 displayTargets 方法。

    在 displayTargets 方法中，首先获取下拉框元素和目标值元素的引用。然后，通过遍历下拉框的选项，获取选中的基地数量。根据选中的基地数量，判断需要显示或隐藏的目标值。

    通过设置目标值元素的 style.display 属性，我们可以控制它们的显示或隐藏。在只选择了一个基地时，我们遍历目标值元素，根据数据属性 data-base 与选中的基地进行匹配，显示对应的目标值元素。

    注意：需要根据实际需求添加更多的基地选项和对应的目标值显示元素，并根据实际情况调整数据属性和样式。



    【相关推荐】



    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题？

问题事件

  • 创建了问题 11月5日

悬赏问题

  • ¥30 关于用python写支付宝扫码付异步通知收不到的问题
  • ¥50 vue组件中无法正确接收并处理axios请求
  • ¥15 隐藏系统界面pdf的打印、下载按钮
  • ¥15 MATLAB联合adams仿真卡死如何解决(代码模型无问题)
  • ¥15 基于pso参数优化的LightGBM分类模型
  • ¥15 安装Paddleocr时报错无法解决
  • ¥15 python中transformers可以正常下载，但是没有办法使用pipeline
  • ¥50 分布式追踪trace异常问题
  • ¥15 人在外地出差，速帮一点点
  • ¥15 如何使用canvas在图片上进行如下的标注，以下代码不起作用,如何修改