创建下拉菜单< select>< option>元素与javascript [英] Creating dropdown <select><option> elements with javascript
本文介绍了创建下拉菜单< select>< option>元素与javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< script type =text / javascript >
//程序输入
var format1Fields =，RepID，RetailOutlet，Address，Information，City，State，ZipCode，Demographic，Bullet，Date，Note1，Note2，Note3，Note4，Note5，AssignTask1，AssignTask2 ，AssignTask3，AssignTask4，LiquorPresence，PhotoLink1，内容描述，PhotoLink2，内容描述，PhotoLink3，Description3，PhotoLink4，Description4，PhotoLink5，Description5，PhotoLink6，Description6，PhotoLink7，Description7，PhotoLink8，Description8，PhotoLink9，Description9，PhotoLink10，Description10，PhotoLink11，Description11 ，PhotoLink12，Description12，Videolink1，Videodecription1，Videolink2，Videodecription2，Videolink3，Videodecription3，Videolink4，Videodescription4，POSInstalled1，POSQuantity1，POSInstalled2，POSQuantity2，POSInstalled3，POSQuantity3，POSInstalled4，POSQuantity4，POSInstalled5，POSQuantity5，POSInstalled6，POSQuantity6，POSInstalled7，POSQuantity7，POSInstalled8 ，POSQuantity8，POSInstalled9，POSQuantity9，POSInstalled10，POSQuantity10，POSInstalled11，POSQuantity11，POSInstalled12，POSQuantity12，Project，Visit
var outputFieldsString =date visited，Mapping link，Date，RepID，Project，RetailOutLet，Address，City，State，Information，Demographic，Bullet，Note1，Note2，Note3，Note4，Note5，AssignTask1，AssignTask2，Assigntask3， AssignTask4，LiquorPresence，PhotoLink1，Picture01，说明1，PhotoLink2，Picture02，广告描述，PhotoLink3，Picture03，Description3，PhotoLink4，Picture04，Description4，PhotoLink5，Picture05，Description5，PhotoLink6，Picture06，Description6，PhotoLink7，Picture07，Description7，PhotoLink8，Picture08，说明8，PosInstalled1，MC冷箱贴纸，PosInstalled2，MC海报12 X 18，PosInstalled3，MC海报18 X 24，PosInstalled4，MC海报24 X 36，PosInstalled5，MC案例卡，PosInstalled6，MC Standees，PosInstalled7，GM海报11 X 17，PosInstalled8，GM海报18 X 24，PosInstalled9，GM配方帐篷帐号，Photolink9，描述9，Photolink10，描述10，Photolink11，描述11，Photolink12，POSInstalled10，通用货架谈话者，POSInstalled11，GM案例卡，POSInstalled12，GM Standees，Picture09，图片10，图片11，PICT ure12，Description12\" ;
var outputDelimiter =，;
var inputFieldList = new Array（）;
var outputFieldList = new Array（）;
$（document）.ready（function（）{
// $（'＃inputfields'）。val（trimOnSides（format1Fields.replace（'/ g'，''） ，））;
$（'＃inputfields'）。val（trimOnSides（format1Fields，，））;
//开始映射click event
$ '#start_mapping'）。click（function（）{
var inputFieldString = $（'＃inputfields'）。val（）;
var inputDelimiter = $（'＃delimiter option：selected' （）;
//输入字段验证
if（inputFieldString ==）{
alert（请提供输入字段标题行，用于标识字段名称！）;
$（'＃inputfields'）。focus（）;
return false;
}
//分隔符验证
if（inputDelimiter ==0）{
alert（请选择与输入字段的分隔符分隔符匹配的正确分隔符s！）;
返回false;
}
//加载输入字段item array
inputFieldList = getFieldsList（inputFieldString，inputDelimiter）;
if（inputFieldList.length == 0）{
alert（将输入字段数据转换成用于映射的项目列表的问题）;
返回false;
}
//加载输出字段item数组
outputFieldList = getFieldsList（outputFieldsString，outputDelimiter）;
if（outputFieldList.length == 0）{
alert（将输出字段数据转换成用于映射的项目列表的问题）;
返回false;
}
// HTML中的打印字段列表项目< ol>
getFormListItems（inputFieldList）;
// getDropDownList（'waqas'，'aiseha'，inputFieldList）;
}）;
}）;
// ###### HELPER FUNCTIONS #######
//帮助生成下拉菜单的形式
函数getFormListItems（fieldListItems ）{
if（（fieldListItems instanceof Array）&（fieldListItems.length> 0））{
var list = $（'＃mappingitems'）。append（'< ul> /ul>').find('ul'）;
for（i = 0; i< = fieldListItems.length-1; i ++）{
list.append（'< li>'）;
list.append（getDropDownList（fieldListItems [i]，fieldListItems [i]，fieldListItems））;
list.append（'< / li>'）;
//list.append('<li>'+fieldListItems[i]+'</li>'）;
// alert（i）;
}
}
}
函数getDropDownList（name，id，optionList）{
var combo = $（< select>< /选择>）。attr（name，name）;
$ .each（optionList，function（i，el）{
combo.append（< option>+ el +< / option>）;
}）;
return combo;
// OR
//$(\"#SELECTOR\").append(combo）;
}
// helper split based string array generators
function getFieldsList（fieldsString，delimiter）{
var returnList = new Array（）;
// alert（fieldsString）;
//验证参数及其数据类型
if（（fieldsString.length> 0）&&（delimiter.length> 0））{
returnList = fieldsString.split定界符）;
return returnList;
} else {
alert（'function in function arguments'）;
}
}
//帮助字符串函数
函数trimOnSides（str，chars）{
return ltrim（rtrim（str，chars）），chars ）;
}
函数ltrim（str，chars）{
chars = chars || \\s;
return str.replace（new RegExp（^ [+ chars +] +，g），）;
}
函数rtrim（str，chars）{
chars = chars || \\s;
return str.replace（new RegExp（[+ chars +] + $，g），）;
}
< / script>
这是对函数的调用：getFormListItems（inputFieldList）;
inputFieldList可以包含Apple，Orange，Banana，Mango
请帮助
感谢
Waqas
解决方案
这将立即创建下拉列表：
函数getDropDownList（name，id，optionList）{
var combo = $（< select>< / select>）。attr（id，id）.attr（name，name）;
$ .each（optionList，function（i，el）{
combo.append（< option>+ el +< / option>）;
}）;
return combo;
// OR
$（＃SELECTOR）。append（combo）;
}
I am new to jQuery and Javascript. I have to create select->option drop down control with client side jQuery/Javascripting. These drop downs are having their options from array and i have to create as many drop down as the array items. Please below two functions written, they are not drawing many drop downs but only one.
<script type="text/javascript">
// program inputs
var format1Fields = ",RepID,RetailOutlet,Address,Information,City,State,ZipCode, Demographic,Bullet,Date,Note1,Note2,Note3,Note4,Note5,AssignTask1,AssignTask2,AssignTask3,AssignTask4,LiquorPresence,PhotoLink1,Description1,PhotoLink2,Description2,PhotoLink3,Description3,PhotoLink4,Description4,PhotoLink5,Description5,PhotoLink6,Description6,PhotoLink7,Description7,PhotoLink8,Description8,PhotoLink9,Description9,PhotoLink10,Description10,PhotoLink11,Description11,PhotoLink12,Description12,Videolink1,Videodescription1,Videolink2,Videodescription2,Videolink3,Videodescription3,Videolink4,Videodescription4,POSInstalled1, POSQuantity1,POSInstalled2,POSQuantity2,POSInstalled3,POSQuantity3,POSInstalled4,POSQuantity4,POSInstalled5,POSQuantity5, POSInstalled6,POSQuantity6,POSInstalled7,POSQuantity7,POSInstalled8,POSQuantity8,POSInstalled9,POSQuantity9,POSInstalled10, POSQuantity10,POSInstalled11,POSQuantity11,POSInstalled12,POSQuantity12,Project,Visit,";
var outputFieldsString = "date visited,Mapping link,Date,RepID,Project,RetailOutLet,Address,City,State,Information,Demographic,Bullet,Note1,Note2,Note3,Note4,Note5,AssignTask1,AssignTask2,Assigntask3,AssignTask4,LiquorPresence,PhotoLink1,Picture01,Description1,PhotoLink2,Picture02,Description2,PhotoLink3,Picture03,Description3,PhotoLink4,Picture04,Description4,PhotoLink5,Picture05,Description5,PhotoLink6,Picture06,Description6,PhotoLink7,Picture07,Description7,PhotoLink8,Picture08,Description8,PosInstalled1,MC Cold Box Sticker,PosInstalled2,MC Poster 12 X 18,PosInstalled3,MC Poster 18 X 24,PosInstalled4,MC Poster 24 X 36,PosInstalled5,MC Case Cards,PosInstalled6,MC Standees,PosInstalled7,GM Poster 11 X 17,PosInstalled8,GM Poster 18 X 24,PosInstalled9,GM Recipe Table Tent,Photolink9,Description9,Photolink10,Description10,Photolink11,Description11,Photolink12,POSInstalled10,GM Shelf talker,POSInstalled11,GM Case Cards,POSInstalled12,GM Standees,Picture09,Picture10,Picture11,Picture12,Description12";
var outputDelimiter = ",";
var inputFieldList = new Array();
var outputFieldList = new Array();
$(document).ready(function(){
//$('#inputfields').val(trimOnSides(format1Fields.replace(' /g',''),","));
$('#inputfields').val(trimOnSides(format1Fields,","));
// start mapping click event
$('#start_mapping').click(function(){
var inputFieldString = $('#inputfields').val();
var inputDelimiter = $('#delimiter option:selected').val();
// input field validation
if(inputFieldString == ""){
alert("Please provide Input Fields header line having delimeter to identify the field names!");
$('#inputfields').focus();
return false;
}
// delimiter validation
if(inputDelimiter == "0"){
alert("Please select the correct delimiter that is matches with the seperating delimiter of the Input Fields!");
return false;
}
// Load input fields item array
inputFieldList = getFieldsList(inputFieldString,inputDelimiter);
if(inputFieldList.length==0){
alert("Problem transforming Input Field data into list of items for mapping");
return false;
}
// Load output fields item array
outputFieldList = getFieldsList(outputFieldsString,outputDelimiter);
if(outputFieldList.length==0){
alert("Problem transforming Output Field data into list of items for mapping");
return false;
}
// print field list item in HTML <ol>
getFormListItems(inputFieldList);
//getDropDownList('waqas','aiseha',inputFieldList);
});
});
// ###### HELPER FUNCTIONS #######
// helper to generate form of drop down
function getFormListItems(fieldListItems){
if((fieldListItems instanceof Array) && (fieldListItems.length>0)){
var list = $('#mappingitems').append('<ul></ul>').find('ul');
for(i=0; i<=fieldListItems.length-1; i++){
list.append('<li>');
list.append(getDropDownList(fieldListItems[i],fieldListItems[i],fieldListItems));
list.append('</li>');
//list.append('<li>'+fieldListItems[i]+'</li>');
//alert(i);
}
}
}
function getDropDownList(name, id, optionList) {
var combo = $("<select></select>").attr("name", name);
$.each(optionList, function (i, el) {
combo.append("<option>" + el + "</option>");
});
return combo;
// OR
//$("#SELECTOR").append(combo);
}
// helper split based string array generators
function getFieldsList(fieldsString, delimiter){
var returnList = new Array();
//alert(fieldsString);
// validating the arguments and their data type
if((fieldsString.length > 0) && (delimiter.length>0)){
returnList = fieldsString.split(delimiter);
return returnList;
}else{
alert('Problem in function arguments');
}
}
// helper string functions
function trimOnSides(str, chars) {
return ltrim(rtrim(str, chars), chars);
}
function ltrim(str, chars) {
chars = chars || "\\s";
return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}
function rtrim(str, chars) {
chars = chars || "\\s";
return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}
</script>
this is the call to the function: getFormListItems(inputFieldList); inputFieldList can contain Apple, Orange, Banana, Mango
Please help thanks Waqas
解决方案
This will create the drop downs on the fly:
function getDropDownList(name, id, optionList) {
var combo = $("<select></select>").attr("id", id).attr("name", name);
$.each(optionList, function (i, el) {
combo.append("<option>" + el + "</option>");
});
return combo;
// OR
$("#SELECTOR").append(combo);
}
这篇关于创建下拉菜单< select>< option>元素与javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
