html多出字段显示不出来,替换多个选择中的html选择选项字段的innerHTML文本的一部分不起作用...

这段代码展示了如何使用JavaScript创建一个可自定义的多选下拉框。通过监听`onchange`事件,动态生成包含选项的弹出层,并支持用户通过点击复选框选择和取消选择选项。当用户点击'OK'按钮时,会触发过滤操作并更新选定的值,同时关闭弹出层。此功能可用于实现更灵活的用户交互。
摘要由CSDN通过智能技术生成

var filterstack = {};

var objSelected = {};

function SelectMultiple(field, isAction, paneId) {

//the first paramater might be "this" or the field id.

if (typeof field == "string")

field = $(field);

field.onchange = function () {};

objSelected["" + field.name + ""] = new Array();

var popdiv = document.createElement('DIV');

$(popdiv).setStyle({

backgroundColor: '#fff',

'z-index': '999999999991',

'margin': '-24px -2px',

'width': field.parentNode.offsetWidth + 'px',

'height': field.options.length * 20 + 31 + 'px',

'position': 'absolute',

'display': 'block'

});

popdiv.id = "" + field.name + "";

var selArr = new Array();

var selinnerHTML = "";

for (var i = 0; i < field.options.length; i++) {

var innerdiv = document.createElement('DIV');

$(innerdiv).setStyle({

'width': 'auto',

'position': 'relative'

});

var optionlabel = document.createElement('LABEL');

optionlabel.innerHTML = field.options[i].innerHTML;

$(optionlabel).setStyle({

'width': field.offsetWidth - 25 + 'px'

});

innerdiv.appendChild(optionlabel);

var optionfield = document.createElement('INPUT');

var fieldName = field.name + '[' + field.options[i].value + ']';

optionfield.type = 'checkbox';

optionfield.id = fieldName; //p.vendors_id[0]

optionfield.name = fieldName;

optionfield.toreplace = field.options[i].innerHTML.toString();

if (filterstack["" + fieldName + ""] &&

objSelected["" + field.name + ""]) {

optionfield.checked = true;

selArr.push(field.options[i].value);

if (!(selinnerHTML.match('/' + optionfield.toreplace + '/gi')))

selinnerHTML += optionfield.toreplace + ', ';

} else {

optionfield.checked = false;

selinnerHTML.replace('/' + optionfield.toreplace + '/gi', '');

}

optionfield.value = field.options[i].value;

$(optionfield).setStyle({

'width': '10px',

'display': 'inline'

});

optionfield.onclick = function (e) {

var el = (e) ? e.target : ((window.event.srcElement) ? window.event.srcElement : null);

var selArr = objSelected["" + field.name + ""];

if (el.checked) {

selArr.push(el.value);

filterstack["" + field.name + ""] = selArr;

if (!(selinnerHTML.match('/' + el.toreplace + '/gi')))

selinnerHTML += el.toreplace + ', ';

} else {

// .replace DOES NOT WORK

if ((selinnerHTML.match('/' + el.toreplace + '/gi')))

selinnerHTML.replace('/' + el.toreplace + '/gi', '');

field.options[field.selectedIndex].innerHTML = selinnerHTML;

for (var i = 0; i < selArr.length; i++) {

if (!selArr[i].checked && selArr[i] == el.value) {

selArr.splice(i, 1);

break;

}

}

filterstack["" + field.name + ""] = selArr;

}

}; //optionfield.onclick

//ignore empty values

if (optionfield.value != "")

innerdiv.appendChild(optionfield);

popdiv.appendChild(innerdiv);

} //for

field.options[0].innerHTML = selinnerHTML;

objSelected["" + field.name + ""] = selArr;

filterstack["" + field.name + ""] = selArr;

var ok = document.createElement('INPUT');

ok.type = 'button';

ok.value = 'OK';

$(ok).setStyle({

'width': '55px',

'margin': '5px 0px 0px 7px',

'text-align': 'center'

});

ok.onclick = function (el) {

postFilter(null, null, isAction + '/', field.name + '/', filterstack["" + field.name + ""] + '/', paneId);

field.parentNode.removeChild(popdiv);

};

var cancel = document.createElement('INPUT');

cancel.type = 'button';

cancel.value = 'Cancel';

$(cancel).setStyle({

'width': '55px',

'margin': '0',

'text-align': 'center',

'display': 'inline'

});

cancel.onclick = function (el) {

field.parentNode.removeChild(popdiv);

};

popdiv.appendChild(ok);

popdiv.appendChild(cancel);

field.parentNode.appendChild(popdiv);

}​

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值