JAVASCRIPT:根据两个选择确定路径

JAVASCRIPT: Determining path depending on two selections

本文关键字：选择 两个 路径 JAVASCRIPT      更新时间：2023-09-26

我的任务是清理一些代码/可能创建更有效的路线来进行以下操作：

窗体中有两个选择框。一个称为程序类型，另一个称为角色。有 4 种程序类型和 10 个角色。根据您选择的两个，它将为您带来两个特定的页面。

此外，某些角色不可选择，具体取决于所选的程序类型。因此，例如，如果在计划类型 - "问题创建者"下选择"GST"，"官员"和"经理"将无法选择作为角色。

我

想知道是否有人对我可以使用哪种 JavaScript 函数来完成这项任务有任何建议。

看看我的解决方案。我倾向于不喜欢 switch 语句，因为它们会变得很麻烦，所以我使用了正则表达式。

下面的代码在更改program-type选择的值时调用依赖项函数。然后，它循环访问 role select 元素的每个选项，并根据每个选项的数据依赖项属性检查program-type select 元素的当前值。

正则表达式检查属性是否与值、其中一个值（用逗号分隔）或全部捕获（我在本例中*）匹配 - 例如，如果为program-type选择了第一个选项，则正则表达式比较将计算为以下内容：

"1".match(/'*|1/i) // true
"2,3".match(/'*|1/i) // false
"*".match(/'*|1/i) // true

如果它们不匹配，我已将该选项的显示设置为无 - 但如果您愿意，您可以禁用它......任何你想要的东西。

如果你不熟悉正则表达式，我推荐正则表达式

希望这有帮助。

function dependency(e){
  var roles = document.querySelectorAll('#role option')
  for(var i = 0 ; i < roles.length ; i++) {
    var re = new RegExp('''*|' + e.currentTarget.value, 'i')
    if(roles[i].dataset.dependency.match(re)) roles[i].style.display = 'block'
    else roles[i].style.display = 'none'
  }
}
document.querySelector('#program-type').addEventListener('change', function(e){
  dependency(e)
})
<select id="program-type" name="program-type">
  <option value="default" disabled selected>Select Program-Type</option>
  <option value="1">1</option>  
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<select id="role" name="role">
  <option value="foo" data-dependency="*" disabled selected>Select role</option>  
  <option value="foo" data-dependency="1">foo</option>  
  <option value="bar" data-dependency="2,3">bar</option>  
  <option value="baz" data-dependency="*">baz</option>  
</select>

相关文章：