A simple package of a drop-down box plug-in, only do a simple style processing, mainly to achieve the drop-down function, dependent on Jquery,

Select (DOM,options,callback);

  1. Dom is the parent element that needs to be used as a drop-down box

  2. The option configuration has the following properties

    *1 chooseTips to display prompts, e.g. Please select task *2 defaultVal selected by default *3 titleKey array used for display *4 valueKey array used for selection *5 list array passed in, How many drop-down boxes are thereCopy the code

3. The callback function returns two arguments: the first argument is the currently selected valueKey value and the second argument is the currently selected object in the array

4. Method execution returns an object on which two methods are provided

ChangeList Changes the display of the drop-down array and passes in a new array. Note that the titleKey and valueKey of the array must be the same as before. SetValue Changes the current selected item and passes in valueKey in the current arrayCopy the code

The method of use is as follows,

<div class="box" style="width:250px; height:70px;" ></div> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src=".. / test/select. Js "> < / script > < script > let arr = [{name: a ' 'option, id: 1}, {name:' option 2, id: 2}, {name: 'option 3, id: }] let selectObj1 = select('. Box ',{chooseTips:' please select option ', defaultVal:2, Function (val,obj){titleKey:'name', valueKey:'id', list:arr,},function(val,obj){ Log (val,obj)}) </script>Copy the code
(function() {/** * 1. Dom is the parent element of the drop-down box * 2. * defaultVal The selected key by default * the property value in titleKey array used for display * the value in valueKey array used for selection * list the array passed in, Callback returns two arguments: the first argument is the currently selected valueKey value and the second argument is the currently selected object in the array * * The entire method execution returns an object, The changeList object provides two methods * 1. ChangeList changes the displayed drop-down array. Pass in a new array with the same titleKey and valueKey. Function select(dom, option, callback) {let list = json.parse (json.stringify (option.list)); ChooseTips = option.chooseTips; // To display a prompt, for example, select the task let defaultVal = option.defaultval; TitleKey = option.titleKey = option.valueKey = option.valueKey = option.valueKey $(dom).height(); let width = $(dom).width(); List. The unshift ({[titleKey] : chooseTips | | 'please select options, [valueKey] : '' }) let str1 = `<div class="showDiv" data-val="" style="width:100%; height:100%;" > ${chooseTips | | 'please select options'} < / div > ` str1 + = ` < div class = "content" style = "top: ${height} px;" >` list.forEach((item, i) => { str1 += ` <div class="select_item" style="width:${width}px; height:${height}px;" data-val="${item[valueKey]}">${item[titleKey]}</div>` }); str1 += ` </div>` $(dom).append(str1); event() if (defaultVal) { $(dom).find('.select_item').each((i, item) => { if ($(item).attr('data-val') == defaultVal) { $(item).click() } }) } this.changeList = function changeList(newlist) { if (newlist[titleKey] == null || newlist[valueKey]) throw new Error('key and value must be same of  last time') $(dom).children().remove() list = JSON.parse(JSON.stringify(newlist));; List. The unshift ({[titleKey] : chooseTips | | 'please select options, [valueKey] : '' }) let str1 = `<div class="showDiv" data-val="" style="width:100%; height:100%;" > ${chooseTips | | 'please select options'} < / div > ` str1 + = ` < div class = "content" style = "top: ${height} px;" >` list.forEach((item, i) => { str1 += ` <div class="select_item" style="width:${width}px; height:${height}px;" data-val="${item[valueKey]}">${item[titleKey]}</div>` }); str1 += ` </div>` $(dom).append(str1); event() } this.setValue = function setValue(val) { $(dom).find('.select_item').each((i, item) => { if ($(item).attr('data-val') == val) { $(item).click() } }) } function event() { $(dom).find('.showDiv').on('click', function() { if ($(dom).find('.content').hasClass('active')) { $(dom).find('.content').removeClass('active').hide() } else { $($(dom).find('.content').children('.select_item').get(0)).show() if (! $(this).attr('data-val') && list.length > 1) { $($(dom).find('.content').children('.select_item').get(0)).hide() } $(dom).find('.content').addClass('active').show() } }) $(dom).find('.select_item').on('click', function() { let html = $(this).html() let val = $(this).attr('data-val') $(dom).find('.showDiv').html(html).attr('data-val', val); $(dom).find('.content').hide().removeClass('active'); let obj = list.find(item => item[valueKey] == val) callback && callback(val, obj) }) } } function temp(dom, option, Callback) {return new select(dom, option, callback)} window.select = temp})() <style> * {margin: 0; padding: 0; } .boxstyle { margin-left: 20px; position: relative; width: 200px; height: 30px; border: 1px solid #ccc; box-sizing: border-box; cursor: pointer; } .showDiv { width: 100%; height: 100%; padding-left: 4px; } .content { display: none; position: absolute; left: -1px; /* top: 29px; */ width: 100%; max-height: 150px; overflow-y: auto; /* border: 1px solid #ccc; */ z-index: 666; background-color: #fff; border-bottom: 1px solid #ccc; } .content::-webkit-scrollbar { display: none; } .select_item { /* margin-top: -1px; */ /* margin-left: -1px; */ /* width: 250px; height: 30px; */ border: 1px solid #ccc; padding-left: 4px; box-sizing: border-box; cursor: pointer; }. Select_item :hover {border: 0.5px solid blue; } </style>Copy the code