双11狂欢大促

盲盒赢 定制羽绒服

开启惊喜盲盒,抽取你的专属好礼

— 惊喜奖品抢先看 —

如何实现点击选择select时不闪动,求js高手

t150ckh t150ckh 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" defer="defer">
var cc_Array = new Array(
[0,1,"企业文化"],
[1,4,"规章制度"],
[0,28,"网站公告"],
[0,33,"建筑开发"],
[0,34,"建筑产品"],
[0,35,"工程实例"],
[0,36,"企业荣誉"],
[0,37,"企业资质"],
[35,38,"装饰工程"],
[35,39,"小区园林"],
[35,40,"建筑工程"],
[35,41,"民用住宅"],
[34,42,"防盗门"],
[34,43,"陶粒气块"],
[39,44,"电线圈"],
[39,45,"塑钢窗"],
[34,46,"苯板"],
[33,47,"开发实例"],
[33,48,"热卖楼盘"]);

var cc_AllID=""; //所有类别ID集合
var cc_Value=""; // 存储最终取得的类别的值
var cc_Tips="选择分类"; //提示字符

function cc_IsNextClass(ClassID){
for(var i=0;i<cc_Array.length;i++){
if(cc_Array[i][0]==ClassID){return true;}
}
return false;
}

function cc_getParentId(ClassID){
for(var i=0;i<cc_Array.length;i++){
if(cc_Array[i][1]==ClassID){return cc_Array[i][0];}
}
return -1;
}

function cc_DrawLists(SelectName,ClassID,Mode,Html,TheOption){
var ParentID=cc_getParentId(ClassID);
var TheSelected="";
var HtmlCode="";
cc_AllID+="," + ClassID;
ParentID=(ParentID==0) ? -1:ParentID;
HtmlCode="<select name=\""+SelectName+"_PPST\" id=\""+SelectName+"_PPST\" onChange={javascript:cc_DrawLists(\""+SelectName+"\",this.value.split(\"|\")[0],"+Mode+",\"\",\""+TheOption+"\")}>\n";
HtmlCode+="<option value=\""+ParentID+"\">"+cc_Tips+"</option>\n";
ParentID=(ParentID==-1) ? 0:ParentID;
for(var i=0;i<cc_Array.length;i++){
if(cc_Array[i][1]==ClassID){
TheSelected=" selected";
switch(Mode){
case 0:
cc_Value+="," + cc_Array[i][1];
break;
case 1:
cc_Value+="," + cc_Array[i][2];
break;
case 2:
cc_Value+="," + cc_Array[i][1] + "|" + cc_Array[i][2];
break;
}
}else{
TheSelected="";
}
if(cc_Array[i][0]==ParentID){
HtmlCode+="<option value=\""+cc_Array[i][1]+"|"+cc_Array[i][2]+"\""+TheSelected+">"+cc_Array[i][2]+"</option>\n";}
}
HtmlCode+="</select>\n"+Html
if(ParentID==0){
if(cc_IsNextClass(cc_AllID.split(",")[1])){
HtmlCode+="<select name=\""+SelectName+"_PPST\" id=\""+SelectName+"_PPST\" onChange={javascript:cc_DrawLists(\""+SelectName+"\",this.value.split(\"|\")[0],"+Mode+",\"\",\""+TheOption+"\")}>\n";
HtmlCode+="<option value=\""+ParentID+"\">"+cc_Tips+"</option>\n";
for(var i=0;i<cc_Array.length;i++){
if(cc_Array[i][0]==cc_AllID.split(",")[1]){
HtmlCode+="<option value=\""+cc_Array[i][1]+"|"+cc_Array[i][2]+"\">"+cc_Array[i][2]+"</option>\n";
}
}
HtmlCode+="</select>\n"
}
cc_AllID="";
var Value=cc_Value.split(",")[1];
if(Value==null) Value="";
HtmlCode+="<input type=\"hidden\" name=\""+SelectName+"\" id=\""+SelectName+"\" value=\""+Value+"\" />"
cc_Value="";
document.getElementById("cc_Container389_"+SelectName).innerHTML=HtmlCode;
}else{
cc_DrawLists(SelectName,ParentID,Mode,HtmlCode,TheOption);
}
}
//根
//cc_DrawLists("ClassID",-1,0,"","");
//定位到栏目
cc_DrawLists("ClassID",46,2,"","");
//栏目的值
//alert(document.getElementById("ClassID").value);

</script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="Table">

<form action="?Action=AddNews&NewsID=" method="post" onsubmit="return CheckAddNewsSubmit(this)">

<tr>
<td width="15%" class="right">信息分类: </td>
<td width="85%" class="left"><span id="cc_Container389_ClassID"></span>
</td>
</tr>

</form>
</table>
</body>
</html>




做了下无限级联的select ,但一个问题是每次点击都会重新加载select,在视觉上很不好,求js高手给些思路。
...全文

相关推荐

js实现可输入可选择的select下拉框

本文实例为大家分享了可输入可选择的select下拉框,供大家参考,具体内容如下 1、原理: 1.1将input输入框和select框合并在一起,但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能 动态的加载一个临时的div出现在该input下方,当点击页面中的空白地方,div隐藏。 1.3代码: &lt;!doctype html> &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus:registered:"&gt; &lt;meta name="Author" con

weixin_38712578

js实现鼠标点击文本框自动选中内容的方法

主要介绍了js实现鼠标点击文本框自动选中内容的方法,涉及javascript鼠标点击事件onClick及选择事件select的使用技巧,非常简单实用,需要的朋友可以参考下

weixin_38500607

layui问题之模拟select点击事件的实例讲解

今天小编就为大家分享一篇layui问题之模拟select点击事件的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

weixin_38548394

用javascript实现不按Ctrl实现Multiple Select多选

用javascript实现不按Ctrl实现Multiple Select多选

weixin_38689055

js实现select下拉框选择

主要为大家详细介绍了js实现select下拉框选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

weixin_38586186
评论 12
收藏 已收藏
分享
返回顶部
t150ckh
JavaScript 87,983 成员 224,680 内容