JS封装的下拉框

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
});
});
};
};

 





以上是关于JS封装的下拉框的主要内容,如果未能解决你的问题,请参考以下文章

js改变下拉框内容

后台封装成jsonarray,前台js如何接收并存储到下拉列表中,急急急。。。

Html页面中select下拉列表框别样用法,一个方法一劳永逸。

antDesign+react 实现选择不同的下拉框出现不同的组件

html做网页,关于日期下拉列表框的问题

select下拉框、输入框在IOS中出现阴影