如何对此 javascript 函数进行编码以在选择特定类型时显示两个 + 字段集

How do I code this javascript function to display two+ fieldsets when a particular type is selected

本文关键字：显示 类型 字段 两个 javascript 函数 选择 编码      更新时间：2023-09-26

我有一个网络表单，在本例中，用户从下拉字段中选择项目类型，各个部分根据所选类型隐藏/显示。 下面数组中的 id 是字段集 id，值是在下拉字段中选择的内容。

现在问题来了。 我有一个客户希望在选择特定项目时显示两个部分/字段集。[此选项可应用于各种项目类型]。例如，如果我选择"小册子"作为项目类型，客户希望显示小册子部分/字段集以及名为"简要详细信息"的字段集。 它的id是'556'。

如果我在下面的数组中添加"{id ： '556'，值：'小册子'}"，将显示"简要详细信息"部分/字段集，但它隐藏了在这种情况下也应该显示的"小册子"字段集。 我确实明白为什么会发生这种情况，但无法弄清楚如何使这个 JavaScript 工作。

那么我如何使用下面的代码库对此进行编码 [如果选择的项目类型等于手册，则显示字段集 556 和 159]

var projectTypes = new Array (
    {id : '123', value:'Banner'},
    {id : '456', value:'Ad'},
    {id : '789', value:'Graphics'},
    {id : '987', value:'Billboard'},
    {id : '654', value:'Booklet'},
    {id : '321', value:'Tickets'},
    {id : '147', value:'Window'},
    {id : '159', value:'Brochure'}
    );
/*function below occurs onChange event of project type dropdown:*/
refreshSections(project_type);  
/*
 *  Function used to hide/show sections based on selected project type
 */
function refreshSections(selectedType) 
{   
    for (var i = 0; i < projectTypes.length; i++) 
    {
        if (projectTypes[i].value == selectedType) 
        {
            document.getElementById("section-"+ projectTypes[i].id).style.display = '';
        } else {
            document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
        }
    }   
}
如何使用

数组代替单个 id

{id : ['159','556'], value:'Brochure'}

然后在函数代码中你可以做

if (projectTypes[i].value === selectedType) {
  if (typeof projectTypes[i].id == "object") {
    var targets = typeof projectTypes[i].id;
    for (var j = 0, l = targets.length; j < l; j++) {
      document.getElementById("section-"+ targets[j]).style.display = '';
    }
  } else {
    document.getElementById("section-"+ projectTypes[i].id).style.display = '';
  }
} else {
  document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
}

我没有深入测试它...您可以添加带有一些标记和JS代码的Afiddle，以便更容易检查解决方案

不确定您有多少自由来修改代码/html，但考虑到对相关部分的合理访问，我倾向于为您的projectType数组添加另一个值。实现不一定看起来像这样，但例如：

var projectTypes = new Array (
    {id : '556', value:'Brief Details', showSections: [556, 159]}
);

在所有"可隐藏部分"中添加一个通用类名：

<div id="section-156" class="hideable-section"><!--content--></div>

然后修改函数以将该属性用作替代：

function refreshSections(selectedType) {   
    var i, j;
    //hide everything by default (something like document.getElementsByClassName('hideable-section')
    for (i = 0; i < projectTypes.length; i++) {
        if (projectTypes[i].value == selectedType) {
            if(projectTypes[i].showSections != null) {
                for(j = 0; j < projectTypes[i].showSections.length; j++){
                    document.getElementById("section-"+ projectTypes[i].showSections[j].toString()).style.display = '';
                }
            }
            else {
                document.getElementById("section-"+ projectTypes[i].id).style.display = '';
            }
        }
    }   
}
相关文章：