Custom Multi Column Data Entry Select

Developer
Tim
Size
3,313 Kb
Views
20,240
  1. Custom Multi Column Data Entry Select Previews
  2. Custom Multi Column Data Entry Select HTML Codes
  3. Custom Multi Column Data Entry Select CSS Codes
  4. Custom Multi Column Data Entry Select JS Codes

How do I make an custom multi column data entry select?

What is a custom multi column data entry select? How do you make a custom multi column data entry select? This script and codes were developed by Tim on 31 October 2022, Monday.

Custom Multi Column Data Entry Select Previews
IQ Test

Custom Multi Column Data Entry Select - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Multi Column Data Entry Select</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="test"></div>
<div id="test1"></div>
<button id="get">get</button>
<div id="result"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom Multi Column Data Entry Select - Script Codes CSS Codes

/* Helpers */
.hide{ display: none !important;
}
.selected{ background: cornflowerblue;
}
.disable-text-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default;
}
/* Main CSS */
.container{ width: 190px; margin: 0 20px 20px 20px; float: left; font-size: 12px;
}
.cSelect{ border: 1px solid #ccc; position: relative; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1); background: white; -moz-user-select: none; -webkit-user-select: none;
}
.cSelect-window{ height: 1.9em; cursor: pointer;
}
.cSelect-window span{ display: block; float: left; margin: 0.45em 0 0 0.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 88%;
}
.cSelect-arrow{ float: right; color: #555; width: 10px; margin: .35em .5em 0 0;
}
.cSelect-dropdown{ background: white; position: absolute; border: 1px solid #ccc; width: 100%; margin: 0 -1px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1); display: flex; flex-direction: row; z-index: 1000;
}
.cSelect-dropdown ul{ list-style: none; padding: 0; margin: 5px 0; width: 100%;
}
.cSelect-dropdown ul li{ line-height: 1.1em; padding: 0.3em;
}
.cSelect-dropdown ul li:hover{ background: grey;
}

Custom Multi Column Data Entry Select - Script Codes JS Codes

$('body').ready(()=>{ let dataTree = { one: [1,2,3], two: [2,4,6], three: [3,6,9] } //Populate the dropdown lists $('#test').cascadingSelect(dataTree) createDropdown('#test1', dataTree) $('body').on('click','#get',(e)=>{ $('#result').html($('#test').getPath()) })
})
//Function to get the path of the dropdown
$.fn.getPath = function(){ if(!this.find('.container>.cSelect')){return} return this.find('.container').data('path')
}
//Try to convert function to jQuery plug in
$.fn.cascadingSelect = function(data, opts={placeholder:'--Select--'}){ let rootDOM = `<div class="container"> <div class="cSelect"> <div class="cSelect-window"> <span>${opts.placeholder}</span> <div class="cSelect-arrow cSelect-arrowDown">&#x25BC;</div> <div class="cSelect-arrow cSelect-arrowUp hide">&#x25B2;</div> </div> <div class="cSelect-dropdown hide"></div> </div> </div>` let root = $(rootDOM).hide() root.data('path',[]) createList(root, Object.keys(data)) this.append(root) root.show() //Listeners $(root).on('click','.cSelect-window',(e)=>{ console.log(root) root.find('.cSelect-dropdown').toggleClass('hide') root.find('.cSelect-arrowDown').toggleClass('hide') root.find('.cSelect-arrowUp').toggleClass('hide') }) $(root).on('click','li',(e)=>{ let ul = $(e.target).closest('ul') //Remove all following lists let subLists = ul.nextAll() subLists.remove() //Create next list let text = $(e.target).text() let arr = data[text] if(arr){ createList(root,arr) } //When you reach the end of the list save the location else{ //Close the dropdown root.find('.cSelect-dropdown').addClass('hide') //Reset the arrow root.find('.cSelect-arrowDown').toggleClass('hide') root.find('.cSelect-arrowUp').toggleClass('hide') } //Update path let listIndex = ul.index() if(root.data('path')[listIndex] !== text){ root.data('path')[listIndex] = text root.data('path', root.data('path').slice(0,listIndex+1)) } console.log(root.data('path')) //Display path let span = root.find('span') span.text(root.data('path').join(' '+String.fromCharCode(9654)+' ')) //Display path with selected root.find('li').removeClass('selected') root.data('path').forEach((item,key)=>{ $(root.find('ul')[key]).find('li:contains('+item+')').addClass('selected') }) }) //Functions function createList(root, data, opt={hide:false}){ let ul = $('<ul/>') if(opt.hide){ul.addClass('hide')} data.forEach((item)=>{ let li = $('<li/>',{class:'disable-text-select'}).text(item) ul.append(li) }) root.find(".cSelect-dropdown").append(ul) }
}
//Create dropdown
function createDropdown(DOM, data, opts={placeholder:'--Select--'}){ let rootDOM = `<div class="container"> <div class="cSelect"> <div class="cSelect-window"> <span>${opts.placeholder}</span> <div class="cSelect-arrow cSelect-arrowDown">&#x25BC;</div> <div class="cSelect-arrow cSelect-arrowUp hide">&#x25B2;</div> </div> <div class="cSelect-dropdown hide"></div> </div> </div>` let root = $(rootDOM).hide() root.data('path',[]) $(DOM).append(root) createList(root, Object.keys(data)) root.show() //Listeners $(root).on('click','.cSelect-window',(e)=>{ root.find('.cSelect-dropdown').toggleClass('hide') root.find('.cSelect-arrowDown').toggleClass('hide') root.find('.cSelect-arrowUp').toggleClass('hide') }) $(root).on('click','li',(e)=>{ let ul = $(e.target).closest('ul') //Remove all following lists let subLists = ul.nextAll() subLists.remove() //Create next list let text = $(e.target).text() let arr = data[text] if(arr){ createList(root,arr) } //When you reach the end of the list save the location else{ //Close the dropdown root.find('.cSelect-dropdown').addClass('hide') //Reset the arrow root.find('.cSelect-arrowDown').toggleClass('hide') root.find('.cSelect-arrowUp').toggleClass('hide') } //Update path let listIndex = ul.index() if(root.data('path')[listIndex] !== text){ root.data('path')[listIndex] = text root.data('path', root.data('path').slice(0,listIndex+1)) } console.log(root.data('path')) //Display path let span = root.find('span') span.text(root.data('path').join(' '+String.fromCharCode(9654)+' ')) //Display path with selected root.find('li').removeClass('selected') root.data('path').forEach((item,key)=>{ $(root.find('ul')[key]).find('li:contains('+item+')').addClass('selected') }) }) //Functions function createList(root, data, opt={hide:false}){ let ul = $('<ul/>') if(opt.hide){ul.addClass('hide')} data.forEach((item)=>{ let li = $('<li/>',{class:'disable-text-select'}).text(item) ul.append(li) }) root.find(".cSelect-dropdown").append(ul) }
}
Custom Multi Column Data Entry Select - Script Codes
Custom Multi Column Data Entry Select - Script Codes
Home Page Home
Developer Tim
Username maytim
Uploaded October 31, 2022
Rating 3
Size 3,313 Kb
Views 20,240
Do you need developer help for Custom Multi Column Data Entry Select?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim (maytim) Script Codes
Name
Bot Land Rankings
Reddit API Gifs
Game idea
Pixel paint
GPU Part Picker
Pixi JS
CSS Grid Calendar
Javascript Spelling Game
Double Helix Animation - Jade and Sass
A Pen by Tim
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!