![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
javascript如何实现下拉列表
展开全部
早前写的一个,功能差不多,代码格式自己改改。
<script language="JavaScript">
var
sel = "sel",
custom = "custom",
sDefault = "自定义";
var $ = {
// 显示自定义input
forInput : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);
var iSel = oSel.options.selectedIndex;
var vSel = oSel[iSel].value;
if (vSel == sDefault) {
oSel.style.display = "none";
oCus.style.display = "";
oCus.focus();
}
},
// 显示带有自定义文本选项的select
forSel : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);
oSel.style.display = "";
oCus.style.display = "none";
if (oCus.value.length == 0) {
return false;
}
for (var i = 0; i < oSel.length; i++) {
if (oSel[i].value == oCus.value) {
oSel[i].selected = true;
return false;
}
}
oSel.removeChild(oSel.lastChild); // 清除自定义选项
// 添加input的选项
var cSel = document.createElement("option");
cSel.value = oCus.value;
cSel.innerHTML = oCus.value;
cSel.selected = true;
oSel.appendChild(cSel);
// 补上自定义选项,确保该选项在末尾
cSel = document.createElement("option");
cSel.value = sDefault;
cSel.innerHTML = sDefault;
oSel.appendChild(cSel);
}
};
</script>
<select name="sel" style="width:160px;" onchange="$.forInput()">
<option value="选项一">选项一</option>
<option value="选项二">选项二</option>
<option value="自定义">自定义</option>
</select>
<input type="text" name="custom" size="10" maxlength="10" style="display:none;width:160px;" onblur="$.forSel()"/>
<script language="JavaScript">
var
sel = "sel",
custom = "custom",
sDefault = "自定义";
var $ = {
// 显示自定义input
forInput : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);
var iSel = oSel.options.selectedIndex;
var vSel = oSel[iSel].value;
if (vSel == sDefault) {
oSel.style.display = "none";
oCus.style.display = "";
oCus.focus();
}
},
// 显示带有自定义文本选项的select
forSel : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);
oSel.style.display = "";
oCus.style.display = "none";
if (oCus.value.length == 0) {
return false;
}
for (var i = 0; i < oSel.length; i++) {
if (oSel[i].value == oCus.value) {
oSel[i].selected = true;
return false;
}
}
oSel.removeChild(oSel.lastChild); // 清除自定义选项
// 添加input的选项
var cSel = document.createElement("option");
cSel.value = oCus.value;
cSel.innerHTML = oCus.value;
cSel.selected = true;
oSel.appendChild(cSel);
// 补上自定义选项,确保该选项在末尾
cSel = document.createElement("option");
cSel.value = sDefault;
cSel.innerHTML = sDefault;
oSel.appendChild(cSel);
}
};
</script>
<select name="sel" style="width:160px;" onchange="$.forInput()">
<option value="选项一">选项一</option>
<option value="选项二">选项二</option>
<option value="自定义">自定义</option>
</select>
<input type="text" name="custom" size="10" maxlength="10" style="display:none;width:160px;" onblur="$.forSel()"/>
展开全部
JS实现下拉列表,直接可以用dl结构来实现
window.onload=function(){
var odl = document.getElementById('select');
var odt = odl.getElementsByTagName('dt')[0];
var odd = odl.getElementsByTagName('dd');
var oner = 1;
odt.onclick=function(){
if(oner==1){
for(i=0; i<odd.length; i++){
odd[i].style.display='block';
odt.innerHTML='点击收缩';
}
oner++;
}else if(oner==2){
for(i=0; i<odd.length; i++){
odd[i].style.display='none';
odt.innerHTML='点击展开';
}
oner=1;
}
}
}
下面是HTML结构
<dl id="select">
<dt>点击展开</dt>
<dd>这是内容</dd>
<dd>这是内容</dd>
<dd>这是内容</dd>
<dd>这是内容</dd>
<dd>这是内容</dd>
</dl>
JS实现这种下拉列表的方法有很多种,这仅仅只是其中的一种,比这种写法好的也有很多,逻辑对了就可以了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
var obj=id("id");
obj.innerHTML="<select ><option/></option></select>"
obj.innerHTML="<select ><option/></option></select>"
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询