动态创建从SharePoint列表中选择元素和填充选项 [英] dynamically creating select elements and populating options from sharepoint list

问题描述

中的代码，我写的作品，但它可能会更好。我写出来的同样的功能三次，每个组合框元件。我停留在如何让这种更有效的。我已经看过创建一个对象，并把每个变量的数组，但我没能成功地得到它的工作。

 变种csCategory = LT;％= csCategoryArray％>中
 csKeyword = LT;％= csKeywordArray％>中
 csEntity = LT;％= csEntityArray％取代; 
 
 addOption =功能（选择框，文字，价值）{
 VAR OPTN =使用document.createElement（OPTION）; 
 optn.text =文本; 
 optn.value =价值; 
 selectbox.options.add（OPTN）; 
} 
 
 $（函数（）{
 //温度测试的东西来填充选项列表
变种selectObj =的document.getElementById（combobox1）
如果（selectObj）{
表示（变量I = 0; I&下; csCategory.length ++ⅰ）{
 addOption（selectObj，csCategory [I]，csCategory [I]）; 
} 
} 
}）; 
 
 $（函数（）{
 //温度测试的东西来填充选项列表
变种selectObj =的document.getElementById（combobox2）
如果（selectObj） {
表示（变量I = 0; I&下; csKeyword.length ++ⅰ）{
 addOption（selectObj，csKeyword [I]，csKeyword [I]）; 
} 
} 
}）; 
 
 $（函数（）{
 //温度测试的东西来填充选项列表
变种selectObj =的document.getElementById（combobox3）
如果（selectObj） {
表示（变量I = 0; I&下; csEntity.length ++ⅰ）{
 addOption（selectObj，csEntity [I]，csEntity [I]）; 
} 
} 
}）; 
  

解决方案

最明显的第一步是重构了共享代码。所以：

  $（函数（）{
 //温度测试的东西来填充选项列表
变种selectObj =的document.getElementById（combobox2）
如果（selectObj）{
为（VAR I = 0; I< csKeyword.length ++ I）{
 addOption（selectObj， csKeyword [I]中，csKeyword [I]）; 
} 
} 
}）; 
 
（...等...）
  

变为：

 函数填充（ID，集合）{
变种selectObj =的document.getElementById（id）的
如果（selectObj ）{
为（VAR I = 0; I< collection.length ++ I）{
 addOption（selectObj，集合[I]，集合[I]）; 
} 
} 
} 
 
 $（函数（）{
填充（combobox1，csCategory）; 
填充（combobox2 csKeyword）; 
填充（combobox3，csEntity）; 
}）; 
  

我看不到在这个阶段的推杆任何显著优势的 combobox1 和它的兄弟姐妹到一个数组，但它可能是值得重新审视，如果在未来增加更多的组合框这个代码。

The code I wrote works, but it could be better. I am writing out the same function three times, one for each of the combo box elements. I am stuck on how to make this more efficient. I have looked at creating an object and putting each of the variables in an array, but I was not able to successfully get it working.

    var csCategory = <%=csCategoryArray%>,
        csKeyword = <%=csKeywordArray%>,
        csEntity = <%=csEntityArray%>;

 addOption = function (selectbox, text, value) {
    var optn = document.createElement("OPTION");
    optn.text = text;
    optn.value = value;
    selectbox.options.add(optn);
}

$(function () {
    // Temp test stuff to populate option list
    var selectObj = document.getElementById("combobox1")
    if (selectObj) {
        for (var i=0; i < csCategory.length;++i){    
            addOption(selectObj, csCategory[i], csCategory[i]);
        }
    }
}); 

$(function () {
    // Temp test stuff to populate option list
    var selectObj = document.getElementById("combobox2")
    if (selectObj) {
        for (var i=0; i < csKeyword.length;++i){    
            addOption(selectObj, csKeyword[i], csKeyword[i]);
        }
    }
});  

$(function () {
    // Temp test stuff to populate option list
    var selectObj = document.getElementById("combobox3")
    if (selectObj) {
        for (var i=0; i < csEntity.length;++i){    
            addOption(selectObj, csEntity[i], csEntity[i]);
        }
    }
});

解决方案

The obvious first step is to refactor out the shared code. So:

$(function () {
  // Temp test stuff to populate option list
  var selectObj = document.getElementById("combobox2")
  if (selectObj) {
    for (var i=0; i < csKeyword.length;++i){    
        addOption(selectObj, csKeyword[i], csKeyword[i]);
    }
  }
});  

( ... etc ... )

becomes:

function populate(id, collection) {
  var selectObj = document.getElementById(id)
  if (selectObj) {
    for (var i=0; i < collection.length;++i){    
        addOption(selectObj, collection[i], collection[i]);
    }
  }
}

$(function () {
  populate ("combobox1", csCategory);
  populate ("combobox2", csKeyword);
  populate ("combobox3", csEntity);
});

I can't see any significant advantage at this stage of putting combobox1 and its siblings into an array, but it may be worthwhile revisiting this code if more comboboxes are added in the future.

这篇关于动态创建从SharePoint列表中选择元素和填充选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！