JS封装的下拉框

根据拼音首字母查询课程

调用：

var test2 = new ShangShu.Course.Select(1, ‘test2‘,data);
test2.init();参数：1. 1----排列的序号，当调用多个，显示在最前不会被覆盖2. test2----附加在此ID下的文本框下3. data-----数据

HTML代码：

<script type="text/javascript" src="./ShangShu/jquery.js"></script>
<style>
div,span,a,p{
margin:0;
padding:0;
}
</style>
测试页面<br/>
<div style="left:200px;top:100px;">
<div>
<input type="text" placeholder="中文/拼音" value="" style="width:260px;height:30px;outline:none;padding:0 1px;margin:0;" id="test2" />
</div>
</div>
<script>
var data = {"B":[{"id":43,"name":"办公空间设计","initial":"BGKJSJ","code":10084102},{"id":107,"name":"毕业设计考察","initial":"BYSJKC","code":10087013},{"id":106,"name":"毕业实习","initial":"BYSX","code":10087012}],"C":[{"id":80,"name":"设计初步A","initial":"CBSJA","code":10082201},{"id":59,"name":"城市广场景观设计","initial":"CSGCJGSJ","code":13084205},{"id":54,"name":"城市公共艺术设计","initial":"CSGGYSSJ","code":13084201},{"id":40,"name":"城市规划原理B","initial":"CSGHYLB","code":13013320},{"id":58,"name":"城市街道景观设计","initial":"CSJDJGSJ","code":13084204},{"id":76,"name":"城市色彩","initial":"CSSC","code":13082015},{"id":64,"name":"城市艺术概论","initial":"CSYSGL","code":10082010},{"id":49,"name":"餐饮空间设计","initial":"CYKJSJ","code":10084105}],"D":[{"id":6,"name":"大学英语4","initial":"DXYY4","code":13095302}],"F":[{"id":28,"name":"房地产销售","initial":"FDCXS","code":13085012},{"id":19,"name":"服饰文化","initial":"FSWH","code":13085006}],"G":[{"id":42,"name":"公共建筑设计","initial":"GGJZSJ","code":10014182},{"id":37,"name":"观赏植物","initial":"GSZW","code":10013473}]};
var test2 = new ShangShu.Course.Select(1, ‘test2‘,data);
test2.init();
</script>

JS代码：

var ShangShu = {};
ShangShu.Course = {};

ShangShu.Course.Select = function(SelectNum, targetId,sourceData)
{
　　var __self = this;
　　this.width = 500;
　　this.height = 200;
　　this.num = SelectNum; // 选择框编号，如果有多个input的时候必须由小到大的赋值，以免input覆盖div
　　this.TargetId = targetId; // 要操作的Input目标Id
　　this.SourceData = sourceData; // 课程数据列表
　　this.SelectDiv = document.createElement("div"); // 选择部分最外层Div
　　this.SelectId = document.createElement("input"); // 隐藏域用于记录所选择Id
　　this.InputObj = document.getElementById(this.TargetId); // 要操作的Input目标对象
　　this.SelectId.type = "hidden";
　　/**
　　* 初始化
　　* @param string targetId
　　* @param Json[] sourceData
　　*/
　　this.init = function()
　　{
　　　　this.SelectId.id = this.TargetId + "_id";

　　　　// 目标对象单击事件
　　　　this.InputObj.addEventListener(‘click‘, function() {
　　　　　　__self.div_show();
　　　　});
　　　　// 目标对象单击事件
　　　　this.InputObj.addEventListener(‘mouseover‘, function() {
　　　　　　__self.div_show();
　　　　});
　　　　// 目标对象失去焦点事件
　　　　this.InputObj.addEventListener(‘mouseout‘, function() {
　　　　　　//__self.div_hidden();
　　　　});
　　　　// 目标对象输入
　　　　this.InputObj.addEventListener(‘input‘, function() {
　　　　　　__self.init_data(this.value.toUpperCase());
　　　　});
　　　　//对展示框绑定事件
　　　　this.SelectDiv.addEventListener(‘mouseover‘,function(){
　　　　　　__self.div_show();
　　　　});
　　　　//对展示框绑定事件
　　　　this.SelectDiv.addEventListener(‘mouseout‘,function(){
　　　　//__self.div_hidden();
　　　　});　　

　　　　　　// 选择区初始化
　　　　this.init_data(‘‘); // 初始化数据
　　　　this.init_style(); // 初始化样式
　　　　this.init_click(); // 初始化单击事件
　　　　this.InputObj.after(this.SelectId);
　　　　this.SelectId.after(this.SelectDiv);

　　　　this.bindclick();
　　};
　　this.div_hidden = function(){
　　　　__self.SelectDiv.style.display = ‘none‘;
　　};
　　this.div_show = function (){
　　　　__self.SelectDiv.style.display = ‘‘;
　　};
 　/**
　　* 初始化单击事件
　　*/
　　this.init_click = function()
　　{
　　　　var Alist = this.SelectDiv.getElementsByTagName(‘p‘)[0].getElementsByTagName(‘a‘);
　　　　$.each(Alist,function(key,A){
　　　　　　A.addEventListener(‘mouseover‘,function(){
　　　　　　　　__self.click_a_over(A);
　　　　　　});
　　　　A.addEventListener(‘click‘,function(){
　　　　　　// TODO选择
　　　　　　__self.SelectLetter(A.innerHTML);
　　　　});
　　　　A.addEventListener(‘mouseout‘,function(){
　　　　　　__self.click_a_out(A);
　　　　});
　　　　});
　　};

/**
* 根据字母筛选内容
*/
this.SelectLetter = function (word)
{
var DivList = this.SelectDiv.getElementsByTagName(‘div‘)[0].getElementsByTagName(‘div‘);
$.each(DivList,function(key,div){
var DivId = __self.TargetId + "_body_" + word;
if (div.id.length == DivId.length)
{
if(div.id == (__self.TargetId + "_body_" + word))
{
div.style.display = ‘‘;
} else {
div.style.display = ‘none‘;
}
}
});
};

/**
* 定义展示框的样式
* @param {type} TargetObj
*/
this.init_style = function(TargetObj)
{
this.SelectDiv.style.position = "absolute";
this.InputObj.parentNode.style.zIndex = 99999999 - this.num;
this.InputObj.parentNode.style.position = "relative";

this.SelectDiv.style.display = ‘none‘;
this.SelectDiv.style.width = this.width + "px";
this.SelectDiv.style.height = this.height + "px";
this.SelectDiv.style.backgroundColor = "#ffffff";
this.SelectDiv.style.border = "1px solid #A3A3A3";
this.SelectDiv.style.borderColor = "#9ecaed";
this.SelectDiv.style.boxShadow = "0 0 10px #9ecaed";
};

/**
* 鼠标经过高亮
*/
this.click_a_over = function (TargetObj){
TargetObj.style.backgroundColor = ‘#9ecaed‘;
TargetObj.style.color = ‘#fff‘;
TargetObj.style.borderRadius = ‘3px‘;
};
this.click_a_out = function (TargetObj){
TargetObj.style.backgroundColor = ‘#fff‘;
TargetObj.style.color = ‘#000‘;
TargetObj.style.borderRadius = ‘0‘;
};

/**
* 初始化数据
*/
this.init_data = function (word)
{
if (word === ‘‘){
var datanew = sourceData;
} else {
var first = word.substr(0,1);
var datanew;
$.each(sourceData,function(key,val){
if (key === first){
datanew = {[key] : []}
var i = 0;
$.each(val,function(k,v){
var pinyin = v.initial;
if (pinyin.indexOf(word) === 0){
datanew[key][i] = v;
i++;
}
});
};
});
}
if (datanew !== undefined)
{
// 最上边的字母
if (word === ‘‘){
var title = ‘<p style="display:flex;justify-content:space-between;position:absolute;width:100%;background:#fff;overflow:hidden">‘;
} else {
var title = ‘‘;
}
var divheight = this.height - 25;
var divwidth = this.width - 80;
// 下面的显示主体
var html = ‘<div style="width:100%;height:‘+divheight+‘px;z-index:99999999;overflow-y:scroll;margin-top:24px;display:block">‘;
$.each(datanew,function(key,val){
var DivId = __self.TargetId + "_body_" + key;
if (word === ‘‘) title += ‘<a href="#‘+key+‘" style="color:#000;text-align:center;overflow:hidden;padding:2px;width:15px;cursor: pointer;">‘+key+‘</a>‘;
html += ‘<div id="‘ + DivId + ‘" style="clear: both;overflow:hidden">‘;
html += ‘    <div style="float:left;width:35px;text-align:center;color:orange;display: inline-block;">‘ + key + ‘</div>‘;
html += ‘    <div style="width:‘+divwidth+‘px;display: inline-block;float: left;">‘;
$.each(val,function(k,v){
html += ‘    <span style="width:189px;padding:2px 4px;margin: 0 4px;cursor: pointer;display:block;float: left;" wshid="‘+v.id+‘">‘ + v.name + ‘</span>‘;
});
html += ‘    </div>‘;
html += ‘</div>‘;
});
html += ‘</div>‘;
if (word === ‘‘) title += ‘</p>‘;
if (first !== undefined){
if (datanew[first].length === 0) html = ‘<div style="text-align:center;line-height:168px"><span style="color:red;font-size:24px;"><b>没有这个课程</b></span></div>‘;
}
} else {
var title = ‘‘;
var html = ‘<div style="text-align:center;line-height:168px"><span style="color:red;font-size:24px;"><b>没有这个课程</b></span></div>‘;
}
// 将html给到Div
this.SelectDiv.innerHTML = title+html;
};
this.bindclick = function (){
var spanobj = this.SelectDiv.getElementsByTagName(‘span‘);
$.each(spanobj,function(key,val){
var id = this.getAttribute(‘wshid‘);
var name = this.innerHTML;
val.addEventListener(‘click‘,function(){
__self.InputObj.value = name;
__self.SelectId.value = id;
});
});
};
};
时间： 2024-07-29 12:06:28

JS封装的下拉框的相关文章

JS为Select下拉框增加输入功能

JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于select之上,再使用JS将下拉框的值赋值给input,实际上是用input模拟出了select的功能,思路很新颖,也不知到底有多少人需要select可输入文字的功能,下面是详细的实现代码:前端资源分享 .代码   <div style="position:relative;">

js,jquery获取下拉框选中的option

js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; // 选中索引 albumid= sel.options[index].value;//要的值 jQuery获取下拉框选中的option: $("#s option:selected").val();

JS为Select下拉框添加输入功能

JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于select之上,再使用JS将下拉框的值赋值给input,实际上是用input模拟出了select的功能,思路非常新颖,也不知究竟有多少人须要select可输入文字的功能,以下是具体的实现代码:前端资源分享 .代码   <div style="position:relative;">

利用js取到下拉框中选择的值

现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </summary> public enum AdministratorRole { [Display(Name = "平台管理员")] PlatformAdministrator = 1, [Display(Name = "加盟商")] JoiningTrader

通过切换页面引用的js文件实现下拉框的联动

在之前的项目之中,页面最高的角色级别是城市级,一个页面最多是展示一个城市的信息. 因此为每个城市创建了一个js文件,在其中存放此城市的信息,如图: 在此我们关注js文件中存放的区县信息,以北京为例,其区县信息如图: var Districts=[{name:'昌平',index:0},{name:'朝阳',index:1},{name:'崇文',index:2},{name:'大兴',index:3},{name:'东城',index:4}]; 由于之前的页面最多加载某一城市的js文件,Dist

js动态获取下拉框的数据（搜索条件之间互相影响）

前提:在开发的过程当中,我们常常会遇到这种问题:某个查询列表的查询条件之间互相影响,比如现在有两个搜索条件(下拉),一个需要显示小组名称,另一个是根据这个小组名称查找到对应的小组内人员.那么该如何实现呢? 原理:我们暂且将这三个下拉列表起名为A,B,C. 他们之间的依赖关系是:B的值随着A的变化而变化,C的值随着A,B的变化而变化.我们要做的就是: 1. 进入页面的时候只为A赋值,将B和C都清空. 2. 每次点击A的时候就将B和C的下拉框中的内容先清空再给B赋值. 3. 每次点击B的时候,将C的

JS获取select下拉框选中的value或者其name

举例: <select class="js-example-basic-single js-states" style="width: 300px" name="hid" id="hid"> $("#hid option:checked").text()      //这是获取下拉框显示出来的值 [hid为select标签的id] $("#hid option:checked"

Vue.js模拟百度下拉框

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>智能社--http://www.zhinengshe.com</title> 6 <style> 7 .gray{ 8 background: #ccc; 9 } 10 </style> 11 <script

JS操作select下拉框动态变动(创建/删除/获取)

1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option function addOption(){ //根据id查找对象, var obj=document.getElementByIdx_x