0

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

现在问题来了。我有一个客户希望在选择特定项目时出现两个部分/字段集。[此选项可适用于各种项目类型]。例如，如果我选择“小册子”作为项目类型，客户希望显示小册子部分/字段集以及名为“Brief Details”的字段集。它的 ID 是“556”。

如果我将“{id : '556', value:'Brochure'}”添加到下面的数组中，“Brief Details”部分/字段集将显示，但它隐藏了在这种情况下也应该显示的“Brochure”字段集. 我确实明白为什么会发生这种情况，但无法弄清楚如何使这个 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';
        }
    }   
}
4

2 回答 2

0

不确定您有多少自由来修改代码/html，但是如果可以合理访问相关部分，我会倾向于为您的 projectTypes 数组添加另一个值。实现不一定要像这样，但例如：

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 = '';
            }
        }
    }   
}
于 2012-04-24T14:03:45.873 回答
0

如何使用数组而不是单个 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 代码的小提琴，以便更容易检查解决方案

于 2012-04-24T14:02:46.827 回答