主页 / 问题 / 1555693
Accepted
drako black
Asked:2023-12-11 20:46:03 +0000 UTC2023-12-11 20:46:03 +0000 UTC

通过选择动态替换数据

  • 772

朋友们，我们需要专家的帮助！

因此，我有几个使用以下命令制作的下拉列表select：

<table>
<tr>
<td class="cell4 cell1">
  <select name="Gender" class="sum2 sum3">
    <option value="X">All</option>
    <option value="0">Male</option>
    <option value="1">Female</option>
  </select>
</td>
<td class="cell4 cell1">
  <select name="Social status" class="sum2 sum3">
     <option value="X">All</option>
     <option value="1">Free</option>
     <option value="0">Slave</option>
  </select>
</td>
<td class="cell4 cell1">
  <select name="Adult" class="sum2 sum3">
     <option value="X">All</option>
     <option value="1">Adult</option>
     <option value="0">Children</option>
  </select>
</td>
<td class="cell4 cell1">
  <span id="qualityTotal"></span>
</td>
</tr>
</table>

我有一个包含数据的对象：

const ADULT_YES = 1,
      ADULT_NO = 0;

const WORK_YES = 1,
      WORK_NO = 0;

const MEN = 0,
      FEMALE = 1;
      //ALL = X;

const SLAVE = 0,
      FREE = 1,
      ALL_SOC = 2;

let summary = {
  'TOTAL': 1,

  [`${MEN}`]:0,//0
  [`${MEN}${SLAVE}`]:0,//00
  [`${MEN}${SLAVE}${ADULT_YES}`]:0,//001
  [`${MEN}${SLAVE}${ADULT_NO}`]:0,//000
  [`${MEN}${SLAVE}${ADULT_YES}${WORK_YES}`]:0,//0011
  [`${MEN}${SLAVE}${ADULT_YES}${WORK_NO}`]:0,//0010
  [`${MEN}${SLAVE}${ADULT_NO}${WORK_YES}`]:0,//0001
  [`${MEN}${SLAVE}${ADULT_NO}${WORK_NO}`]:0,//0000
  [`${MEN}${FREE}`]:0,//01
  [`${MEN}${FREE}${ADULT_YES}`]:0,//011
  [`${MEN}${FREE}${ADULT_NO}`]:0,//010
  [`${MEN}${FREE}${ADULT_YES}${WORK_YES}`]:0,//0111
  [`${MEN}${FREE}${ADULT_YES}${WORK_NO}`]:0,//0110
  [`${MEN}${FREE}${ADULT_NO}${WORK_YES}`]:0,//0101
  [`${MEN}${FREE}${ADULT_NO}${WORK_NO}`]:0,//0100

  [`${ALL}${ALL}${ALL}${ALL}`]: 0,

};

任务是：如何做到<span id="qualityTotal"></span>当选择改变时自动显示对象的特定参数的内容select，这样你就会得到这样的结果： 在此输入图像描述

如果有红色10，则应根据select元素的选择从摘要中显示数量，无需任何额外的移动。

理论上，输出<span id="qualityTotal"></span>应该如下所示：

let gen = document.querySelector('[name="Gender"]').value
let soc = document.querySelector('[name="Social status"]').value
let adult = document.querySelector('[name="Adult"]').value

document.querySelector('qualityTotal').innerHTML = summary[`${gen}${soc}${adult}${WORK_NO}`]

这里的值value与 中的常量一致summary，因此我可以选择特定的数据类型，但我不知道如何自动执行此操作。

另外，还有一个与参数有关的问题ALL，即我无法想象如何只为一个参数而不是所有三个参数生成输出。例如，我需要只选择男性，而不考虑他们的社会地位或年龄......在这个例子中如何实现？这是我的意思的一个例子：

在此输入图像描述

理论上，这里我们指的是，就是我在设计的['${MEN}${WORK_NO}']:0,时候需要考虑到所有可能的选择。如何才能做到这一点？${soc}${adult}summary['${MEN}${soc}${adult}${WORK_NO}']:0,

javascript

1 个回答

  1. Best Answer

    事实证明，这个问题的解决方案非常简单，但需要大量劳动力。首先，我们还需要一个常量来表示没有选择的选项，我称之为ALL。

    接下来，有必要将对象转化为单一形式summary，以便可以通过所需数量的变量进行搜索。

    例如，如果我们有 4 个 fields select，那么对象键中的字段数summary应该是 4。

      [`${MEN}${ALL}${ALL}${ALL}`]:0,//0ХХХ
  [`${MEN}${SLAVE}${ALL}${ALL}`]:0,//00ХХ
  [`${MEN}${SLAVE}${ADULT_YES}${ALL}`]:0,//001Х
  [`${MEN}${SLAVE}${ADULT_NO}${ALL}`]:0,//000Х
  [`${MEN}${SLAVE}${ADULT_YES}${WORK_YES}`]:0,//0011
  [`${MEN}${SLAVE}${ADULT_YES}${WORK_NO}`]:0,//0010
  [`${MEN}${SLAVE}${ADULT_NO}${WORK_YES}`]:0,//0001
  [`${MEN}${SLAVE}${ADULT_NO}${WORK_NO}`]:0,//0000

    所有从搜索中排除的字段都被赋予值ALL。因此，我们获得了所有变量的单一标准。所以，如果我们需要“男人”，那么我们就选择['${MEN}']:0,不 ['${MEN}${ALL}${ALL}${ALL}']:0,。

    然后就是技术问题了。

    我们创建一个小函数，从元素中读取值select并从中形成一个“变量”，该变量对应于特定的对象 key summary，之后我们将结果发布在正确的位置：

      let func = function(e) {
    let gen = document.querySelector('[name="Gender"]').value
    let soc = document.querySelector('[name="Social status"]').value
    let ad = document.querySelector('[name="Adult"]').value
    let work = document.querySelector('[name="Work"]').value
    document.getElementById('qualityTotal').innerText = summary[`${gen}${soc}${ad}${work}`]
  }
  document.getElementById('info_workers').addEventListener("change", func, false)

    我们将它挂在桌子上addEventListener，以便它跟踪元素的变化select。

    如果出现问题，为什么在表上，而不是在元素上select，我会解释：问题是select表中可以有很多元素，这意味着为了跟踪所有元素的更改，该函数需要连接到所有元素。这是额外的代码、额外的检查和额外的内存负载。

    addEventListener因此，将其设置为将成为 all 的父元素的元素要容易得多select。

    结果，我们得到一个表，您可以在其中选择必要的参数并找出存储在其中的值，而无需进行不必要的移动。

    =================================================== ===========

    PS 看起来这样的数据组织系统太不合理了，但最终，它使得极大且相当容易地简化程序本身的执行代码成为可能。我只用了一行代码就找到了所需的元素并显示它；如果数据是根据不同的原则组织的，那么这项任务将需要更复杂的软件解决方案。

    然而，这种方法的缺点也很明显，因为在对象的可能选项列表中，summary我们必须考虑可能永远不需要的所有可能选项，但为了程序的正确操作，必须考虑它们考虑到。因此，可能的选项越多，对象就越广泛summary，因此，如果可能的选项不是很多，则此选项是合适的，但如果可能的选项超过 100 个，则考虑其他选项是有意义的解决这个问题。

    • 0

相关问题