We Keep Coding

multi-step form, not submitting on last stage

Update:
I have added new js code which fixed my issue and by adding it here, it may help others.
Multi-step form works (codepen), and I have integrated it into my server-side scripting. Still working. The code is all available here. (https://codepen.io/ActiveCodex/pen/OVBeMg#code-area) The button element labelled 'Next' moves the user along through the steps. On the last step, the JS changes the labelling of the button 'Next' to be a 'Submit' button but it doesn't submit to anywhere. I want to add that 'Submit' functionality without breaking the 'Next' button functionality. Either to submit via Ajax or the usual form 'post' method.
I wrapped the div id='form' into a <form> element and whilst that would submit, it did so even when the 'Next' button was clicked on and not only when the submit button was clicked.
(I'm not experienced in .js since perl & php are my norm). I added an event listener but the data is not in js variables. I am asking for tip on what I should be looking for - eg a listener or a submit function or something I can google for. I have tried to 'preventDefault()' but that has prevented everything on the form.
html code firstly...
<div id='form' class='form' action="/cgi-bin/real-estate-dashboard-dev/processing_scripts/edit-listings-data.pl" method='get'>
<h1 class='property_summary'>Property Summary</h1>
<input id="one" type="radio" name="stage" checked="checked" />
<input id="two" type="radio" name="stage" />
<input id="three" type="radio" name="stage" />
<input id="four" type="radio" name="stage" />
<input id="five" type="radio" name="stage" />
<input id="six" type="radio" name="stage" />
<div class="stages">
<label for="one">1</label>
<label for="two">2</label>
<label for="three">3</label>
<label for="four">4</label>
<label for="five">5</label>
<label for="six">6</label>
</div>
<span class="progress"><span></span></span>
<div class='panels'>
<div data-panel="one">
<h4>Stage 1</h4>
<p>Number of Receptions</p>
<select name="number_of_reception_rooms" style='padding: 10px;font-size:1.5em;'>
<option value='' style='font-weight:700;'>Number of Receptions</option>
<option value="1">1</option>
<option value="2" selected='selected'>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div data-panel="two">
<h4>Stage 2</h4>
<p>Number of Ensuites</p>
<select name="number_of_ensuites" style='padding: 10px;font-size:1.5em;'>
<option value='' style='font-weight:700;'>Number of Ensuites</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected='selected'>5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<button>Next</button>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js">
$('.form .stages label').click(function () {
var radioButtons = $('.form input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
selectedIndex = selectedIndex + 1;
});
$('.form button').click(function () {
var radioButtons = $('.form input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
selectedIndex = selectedIndex + 2;
$('.form input[type="radio"]:nth-of-type(' + selectedIndex + ')').prop('checked', true);
if (selectedIndex == 6) {
$('button').html('Submit');
}
});
// not working at all as I mentioned.
document.getElementById("form").addEventListener("click", function(e)
{
var bedrooms = e.number_of_bedrooms;
e.preventDefault();
console.log( 'number_of_bedrooms ' + number_of_bedrooms);
})
//document.getElementById("myForm").submit();
</script>
```document.getElementById("form").addEventListener("click", function(e)
{
//var number_of_bedrooms = e.target.number_of_bedrooms;
e.preventDefault();
//console.log( 'number_of_bedrooms ' + number_of_bedrooms);
})
So the expected result is that the 'Next' button continues to step me through the form but on the last step, the submit button must submit the data in the div <id='form'> to a new script when I click it.
...code that fixed my issue...
$('#myForm button').click(function(e) {
var radioButtons = $('#myForm input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
var numberForButtonAction = selectedIndex;
numberForButtonAction = numberForButtonAction + 2;
selectedIndex = selectedIndex + 2;
$('.form input[type="radio"]:nth-of-type(' + selectedIndex + ')').prop('checked', true);
if (numberForButtonAction <= 5 ){
$('button').html('Next');
document.getElementById("myForm").addEventListener("click", function(event){
e.preventDefault();
});
}
if (numberForButtonAction == 6 ){
$('button').html('Submit');
document.getElementById("myForm").addEventListener("click", function(event){
e.preventDefault();
});
}
if (selectedIndex > 6) {
$('button').html('Submit');
}
});

I think I have a solution for you.
First of all, I wrapped the entire form with the form tag, and set onsubmit function (alter it for your needs).
The second thing I did was to change the onclick listener on the next button. I changed it from button tag to input tag with type="button". When the selected is equal to 6, I'm changing it to type="submit". That way, when you click the submit, the form will submit!, and when you click next it will to its regular action.
Here is the code:
$('.form .stages label').click(function() {
var radioButtons = $('.form input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
selectedIndex = selectedIndex + 1;
});
$('#last').click(function() {
var radioButtons = $('.form input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
selectedIndex = selectedIndex + 2;
$('.form input[type="radio"]:nth-of-type(' + selectedIndex + ')').prop('checked', true);
if (selectedIndex == 6) {
document.getElementById('last').value = "Submit";
document.getElementById('last').type = "submit";
return false;
}
});
function doSomething() {
console.log('submitted');
}
.stages {
font-size: 0;
text-align: justify;
}
.stages:after {
content: '';
display: inline-block;
font-size: 0;
text-align: justify;
width: 100%;
}
input[type="radio"] {
display: none;
}
.stages label {
background: #ffffff;
border: solid 5px #c0c0c0;
border-radius: 50%;
cursor: pointer;
display: inline-block;
font-size: 0;
font-weight: 700;
height: 50px;
line-height: 50px;
position: relative;
text-align: center;
vertical-align: top;
width: 50px;
z-index: 1;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.stages label:after {
content: '\2713';
color: #0cc39f;
display: inline-block;
font-size: 16px;
}
#one:checked~.stages label[for="one"],
#two:checked~.stages label[for="two"],
#three:checked~.stages label[for="three"],
#four:checked~.stages label[for="four"],
#five:checked~.stages label[for="five"],
#six:checked~.stages label[for="six"] {
border-color: #0cc39f;
}
.stages label.active {
border-color: purple !important;
}
#one:checked~.stages label,
#two:checked~.stages label[for="one"]~label,
#three:checked~.stages label[for="two"]~label,
#four:checked~.stages label[for="three"]~label,
#five:checked~.stages label[for="four"]~label,
#six:checked~.stages label[for="five"]~label {
font-size: 1rem;
}
#one:checked~.stages label:after,
#two:checked~.stages label[for="one"]~label:after,
#three:checked~.stages label[for="two"]~label:after,
#four:checked~.stages label[for="three"]~label:after,
#five:checked~.stages label[for="four"]~label:after,
#six:checked~.stages label[for="five"]~label:after {
display: none;
}
.progress>span {
background: #c0c0c0;
display: inline-block;
height: 5px;
transform: translateY(-2.75em);
transition: 0.3s;
width: 0;
}
#two:checked~.progress span {
width: calc(100% / 5 * 1);
}
#three:checked~.progress span {
width: calc(100% / 5 * 2);
}
#four:checked~.progress span {
width: calc(100% / 5 * 3);
}
#five:checked~.progress span {
width: calc(100% / 5 * 4);
}
#six:checked~.progress span {
width: calc(100% / 5 * 5);
}
.panels div {
display: none;
}
#one:checked~.panels [data-panel="one"],
#two:checked~.panels [data-panel="two"],
#three:checked~.panels [data-panel="three"],
#four:checked~.panels [data-panel="four"],
#five:checked~.panels [data-panel="five"],
#six:checked~.panels [data-panel="six"] {
display: block;
}
/* Custom code for the demo */
html,
button,
input,
select,
textarea {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
body {
background-color: #0cc39f;
margin: 0;
padding: 0 2em;
}
a {
color: #0cc39f;
}
h2,
h4 {
margin-top: 0;
}
.form {
background: #ffffff;
box-shadow: 0 5px 10px rgba(0, 0, 0, .4);
margin: 4em;
min-width: 480px;
padding: 1em;
}
.panels div {
border-top: solid 1px #c0c0c0;
margin: 1em 0 0;
padding: 1em 0 0;
}
input {
box-sizing: border-box;
display: block;
padding: .4em;
width: 100%;
}
#last {
background-color: #0cc39f;
border: 0;
color: #ffffff;
cursor: pointer;
font-weight: 700;
margin: 1em 0 0 0;
padding: 1em;
width: unset;
}
#last:hover {
opacity: 0.8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
<h2>Multi Page Form (Pure CSS)</h2>
<p>Divide long forms, enable users to flick back and forward.</p>
<p>Use JS to validate form at the end of the stage and highlight tab(s) that contain(s) error.</p>
<form onsubmit="doSomething(); return false;">
<input id="one" type="radio" name="stage" checked="checked" />
<input id="two" type="radio" name="stage" />
<input id="three" type="radio" name="stage" />
<input id="four" type="radio" name="stage" />
<input id="five" type="radio" name="stage" />
<input id="six" type="radio" name="stage" />
<div class="stages">
<label for="one">1</label>
<label for="two">2</label>
<label for="three">3</label>
<label for="four">4</label>
<label for="five">5</label>
<label for="six">6</label>
</div>
<span class="progress"><span></span></span>
<div class="panels">
<div data-panel="one">
<h4>Stage 1</h4>
<input type="text" placeholder="First Name" />
</div>
<div data-panel="two">
<h4>Stage 2</h4>
<input type="text" placeholder="Last Name" />
</div>
<div data-panel="three">
<h4>Stage 3</h4>
<input type="text" placeholder="Address" />
</div>
<div data-panel="four">
<h4>Stage 4</h4>
<input type="text" placeholder="Email" />
</div>
<div data-panel="five">
<h4>Stage 5</h4>
<input type="text" placeholder="Phone Number" />
</div>
<div data-panel="six">
<h4>Stage 6</h4>
<input type="text" placeholder="Comment" />
</div>
</div>
<input type="button" id="last" value="Next">
<br><br>
</form>
</div>

Multi select drop down with checkbox

can anybody help me on implementing multi select drop down with check box? I have referred below link example.
http://www.codexworld.com/multi-select-dropdown-list-with-checkbox-jquery/
Problem with the sample provided above is only hard coded options are populating in the dropdown. I need it an empty drop down when page load. option will be assigned based on Ajax call response data i.e dynamically list will come from server. Also, drop down list has to refresh every time when server call made and response came for different events/scenarios.

You can try bellow sample code as startup:
<select id="ddlId"></select>
$.ajax({
url: 'apiurl',
type: 'GET',
dataType: 'json',
success: function(data) {
var dataObj=JSON.parse(data);
var optionHtml="";
for(var i=0;i<dataObj.length;i++){
optionHtml+='<option value="'+dataObj[i].ValueField+'">'+dataObj[i].TextField+'</option>';
}
$("#ddlId").html(optionHtml);
$('#ddlId').multiselect();
}
});

You can follow below code and get multi-select drop down with checkbox using jquery / ajax. additionally you should add jquery to work on this program.if you have any question regarding this please comment
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
var expanded = false;
function showCheckBoxes(){
var checkboxes = document.getElementById("checkboxes");
if(!expanded){
checkboxes.style.display = "block";
expanded = true;
}else{
checkboxes.style.display = "none";
expanded = false;
}
}
</script>
<script>
function getcategory() {
$.ajax({
type: "GET",
url: 'https://jsonplaceholder.typicode.com/posts',
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {
var checkboxes = document.getElementById("checkboxes");
for (var i = 0; i < data.length; i++) {
var node = document.createElement('div');
node.innerHTML = '<label id="'+ data[i].id +'"><input type="checkbox" id="'+ data[i].id +'"/>'+data[i].id +'</label>';
document.getElementById('checkboxes').appendChild(node);
}
},
error: function (msg) {
alert("error" + msg);
}
});
}
</script>
<style>
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
#checkboxes{
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color : #1e90ff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body onload="getcategory();">
<div>
<div class="multiselect">
<div class="selectbox" onclick="showCheckBoxes()">
<select>
<option>Select option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
</div>
</div>
</div>
</body>
</html>

<select multiple>
/*for without holding ctrl/command key*/
$('option').mousedown(function(e) {
e.preventDefault();
var originalScrollTop = $(this).parent().scrollTop();
console.log(originalScrollTop);
$(this).prop('selected', $(this).prop('selected') ? false : true);
var self = this;
$(this).parent().focus();
setTimeout(function() {
$(self).parent().scrollTop(originalScrollTop);
}, 0);
return false;
});
select {
width: 400px;
padding: 8px 16px;
}
select option {
font-size: 14px;
padding: 8px 8px 8px 28px;
position: relative;
color: #999;
}
select option:before {
content: "";
position: absolute;
height: 18px;
width: 18px;
top: 0;
bottom: 0;
margin: auto;
left: 0px;
border: 1px solid #ccc;
border-radius: 2px;
z-index: 1;
}
select option:checked:after {
content: attr(title);
background: #fff;
color: black;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 8px 8px 8px 28px;
border: none;
}
select option:checked:before {
border-color: blue;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMC42MSA4LjQ4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzNlODhmYTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkFzc2V0IDg8L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJfMSIgZGF0YS1uYW1lPSIxIj48cmVjdCBjbGFzcz0iY2xzLTEiIHg9Ii0wLjAzIiB5PSI1LjAxIiB3aWR0aD0iNSIgaGVpZ2h0PSIyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ljk3IDAuMDEpIHJvdGF0ZSg0NSkiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjUuMzYiIHk9Ii0wLjc2IiB3aWR0aD0iMiIgaGVpZ2h0PSIxMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC44NiAtMy4yNikgcm90YXRlKDQ1KSIvPjwvZz48L2c+PC9zdmc+);
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
<option title="Option 1">Option 1</option>
<option title="Option 2">Option 2</option>
<option title="Option 3">Option 3</option>
<option title="Option 4">Option 4</option>
<option title="Option 5">Option 5</option>
<option title="Option 6">Option 6</option>
<option title="Option 7">Option 7</option>
<option title="Option 8">Option 8</option>
<option title="Option 9">Option 9</option>
<option title="Option 10">Option 10</option>
<option title="Option 11">Option 11</option>
<option title="Option 12">Option 12</option>
<option title="Option 13">Option 13</option>
<option title="Option 14">Option 14</option>
</select>

datalist vertical scroll not working in chrome

I have used datalist function to list my product names, if list goes too long vertical scrolling not display in google chrome and some browsers. Is it possible to add overflow-y: scroll in css style for datalist? Used code below:
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
<option value="h"></option>
<option value="i"></option>
<option value="j"></option>
<option value="k"></option>
<option value="l"></option>
<option value="m"></option>
<option value="n"></option>
<option value="o"></option>
<option value="p"></option>
<option value="q"></option>
<option value="r"></option>
<option value="s"></option>
<option value="t"></option>
<option value="u"></option>
<option value="v"></option>
<option value="w"></option>
<option value="x"></option>
<option value="y"></option>
<option value="z"></option>
<option value="abc"></option>
<option value="def"></option>
<option value="ghi"></option>
<option value="jkl"></option>
<option value="mno"></option>
<option value="pqrs"></option>
<option value="tuv"> </option>
</datalist>
<input type="submit">
</form>

There is simple solution for this. Use https://github.com/b3n/datalist plugin.
Example:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="YOURBASE_JS_PATH/src/datalist.js"></script>
var maxHeight = '200px';
var openOnClick = true;
$('input[list]').datalist(maxHeight, openOnClick);

Unfortunately, No you can't use overflow-y property for datalist. You will have to write jQuery code to make it happen or at least show all possible values.
I wrote a small example for you i hope it will help you to get it done for you yourself:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#options{
display: none;
height: 300px;
text-align: center;
border: 1px solid red;
overflow-y:scroll;
}
#options>p{
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
<option value="h"></option>
<option value="i"></option>
<option value="j"></option>
<option value="k"></option>
<option value="l"></option>
<option value="m"></option>
<option value="n"></option>
<option value="o"></option>
<option value="p"></option>
<option value="q"></option>
<option value="r"></option>
<option value="s"></option>
<option value="t"></option>
<option value="u"></option>
<option value="v"></option>
<option value="w"></option>
<option value="x"></option>
<option value="y"></option>
<option value="z"></option>
</datalist>
<input type="submit">
<div id="options">
</div>
</form>
<div class="med_rec"></div>
<script>
$('#browsers option').each(function(){
$('#options').append('<p>'+$(this).val()+'</p>');
})
$('#options').css({'width':$('input[name="browser"]').width()});
$('input[name="browser"]').click(function(){
$('#options').show();
});
$('input[name="browser"]').keyup(function(){
$('#options').hide();
});
$('#options p').click(function(){
$('input[name="browser"]').val($(this).text());
$('#options').hide();
})
</script>
</body>
</html>
It actually creates a second option list for you to choose from which is scrollable and if user types in input box then datalist works as expected to give suggestions.
I hope it helps

I have used ComboBox Javascript Component to fix this problem, from: https://www.zoonman.com/projects/combobox/
var no = new ComboBox('cb_identifier');
div.combobox {
font-family: Tahoma;
font-size: 12px
}
div.combobox {
position: relative;
zoom: 1
}
div.combobox div.dropdownlist {
display: none;
width: 200px;
border: solid 1px #000;
background-color: #fff;
height: 200px;
overflow: auto;
position: absolute;
top: 18px;
left: 0px;
}
div.combobox .dropdownlist a {
display: block;
text-decoration: none;
color: #000;
padding: 1px;
height: 1em;
cursor: default
}
div.combobox .dropdownlist a.light {
color: #fff;
background-color: #007
}
div.combobox .dropdownlist,
input {
font-family: Tahoma;
font-size: 12px;
}
div.combobox input {
float: left;
width: 182px;
border: solid 1px #ccc;
height: 15px
}
div.combobox span {
border: solid 1px #ccc;
background: #eee;
width: 16px;
height: 17px;
float: left;
text-align: center;
border-left: none;
cursor: default
}
<script type="text/javascript" charset="utf-8" src="https://www.zoonman.com/projects/combobox/combobox.js"></script>
<div class="combobox">
<input type="text" name="comboboxfieldname" id="cb_identifier">
<span>▼</span>
<div class="dropdownlist">
<a>Item1</a>
<a>Second Item2</a>
<a>Third Item3</a>
</div>
</div>

Dropdown menu hover class not removing

The current implementation allows the use of select boxes and converts them into list items so they can be styled.
When you actually click on the dropdown menus and start hovering over the list item elements, a hover class is added to the ul. Now if the user clicks on the close button clicks on the body, it will close the dropdown and remove the hovering class.
Problem: When the user clicks on the item within the list, the hover class is not removed - until the document is clicked to close it.
var jq = jQuery.noConflict();
(function(jq) {
}(jQuery));
jq('.').selectBox();
.options li:hover {
background-color: #000;
color: #fff;
}
.options li.selected {
background-color: #000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="selectSizeMain">
<select class="selectBoxStyle">
<option value="">Choose Size</option>
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
</div>
<select class="selectBoxStyle">
<option value="">Month…</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>

As I understood you need this one.
var jq = jQuery.noConflict();
(function(jq) {
jq.fn.selectBox = function() {
// Cache the number of options
var sthis = jq(this),
numberOfOptions = jq(this).children('option').length;
// Hides the select element
if (jq('html').hasClass('touch')) {
jq('.options').addClass('s-hidden');
sthis.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
sthis.wrap('<div class="styledSelect"></div>');
} else {
sthis.addClass('s-hidden');
// Wrap the select element in a div
sthis.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
sthis.after('<div class="styledSelect"></div>');
// Cache the styled div
var styledSelect = sthis.next('div.styledSelect');
// Insert an unordered list after the styled div and also cache the list
var slist = jq('<ul />', {
'class': 'options'
}).insertAfter(styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
jq('<li />', {
text: sthis.children('option').eq(i).text(),
"data-value": sthis.children('option').eq(i).val(),
"class": sthis.children('option').eq(i).attr('class'),
"data-sku": sthis.children('option').eq(i).data('sku'),
"data-stock": sthis.children('option').eq(i).data('stock'),
"data-backorder": sthis.children('option').eq(i).data('backorder'),
"data-preorder": sthis.children('option').eq(i).data('preorder')
}).appendTo(slist);
}
// Cache the list items
var slistItems = slist.children('li');
slistItems.hover(function() {
slist.addClass('hovering');
});
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
styledSelect.click(function(e) {
e.stopPropagation();
var closeClicked = jq(this).hasClass("active");
jq('div.styledSelect.active').each(function() {
slist.removeClass('hovering');
jq(this).removeClass('active').next('ul.options').hide();
});
if (!closeClicked) {
jq(this).toggleClass('active').next('ul.options').toggle();
}
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
slistItems.click(function(e) {
e.stopPropagation();
styledSelect.text(jq(this).text()).removeClass('active');
jq(this).addClass("selected").siblings().removeClass("selected");
sthis.val(jq(this).data('value'));
sthis.addClass('THIS');
slist.removeClass('hovering').hide();
});
// Show the first select option in the styled div
if (sthis.val()) {
var currentSelect = sthis.find("option:selected").val();
styledSelect.text(sthis.find("option:selected").text());
slist.find("li[data-value='" + currentSelect + "']").each(function() {
jq(this).addClass('selected');
slist.removeClass('hovering');
});
} else {
styledSelect.text(sthis.children('option').eq(0).text());
}
// Hides the unordered list when clicking outside of it
jq(document).click(function() {
styledSelect.removeClass('active');
slist.removeClass('hovering').hide();
});
jq('#addtoBag, .wishListBtn').click(function() {
styledSelect.removeClass('active');
slist.removeClass('hovering').hide();
});
}
};
}(jQuery));
jq('.selectBoxStyle').selectBox();
.selectSizeMain {
width: 56.77966%;
float: none;
margin: 2.1875rem auto auto;
}
.s-hidden {
visibility: hidden;
padding-right: 10px;
}
.select {
cursor: pointer;
display: inline-block;
position: relative;
color: black;
font-family: GibsonRegular, HelveticaNeue, Helvetica, sans-serif;
font-size: 14px;
font-size: .875rem;
height: 40px;
width: 100%;
}
.styledSelect {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 11px 13px;
border: 1px solid #ddd;
background-color: #fff;
}
.styledSelect:after {
content: "";
width: 0;
height: 0;
border: 5px solid transparent;
border-color: black transparent transparent transparent;
position: absolute;
top: 17px;
right: 9px;
}
.styledSelect.active:after {
content: "";
width: 0;
height: 0;
border: 5px solid transparent;
border-color: green transparent transparent transparent;
position: absolute;
top: 17px;
right: 9px;
}
.options {
display: none;
position: absolute;
max-height: 280px;
overflow-y: scroll;
top: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0 0;
padding: 0 0;
list-style: none;
border: 1px solid #ccc;
border-top: none;
background-color: white;
}
.options li {
padding: 11px 13px;
margin: 0 0;
}
.options li:hover {
background-color: #000;
color: #fff;
}
.options li.selected {
background-color: #fff;
color: #000;
}
<div class="selectSizeMain">
<select class="selectBoxStyle">
<option value="">Choose Size</option>
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
</div>
<select class="selectBoxStyle">
<option value="">Month…</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>

How to design step progress bar using jquery,css

I spent 3 days. I tried to design step by step progress bar like below.
====(discount 10 %)======(discount 20 %)=====(discount 30 %)========
fill it dynamically how can i do that i searched on google every thing i tried to customize but not success so far.
Thanks

I've just made this to inspire you (not sure if it's what you try to do).
$(document).ready(function() {
$('#discount').on('change', function() {
$('#discount-bar').css({'width' : $(this).val() + '%'});
});
});
select {
margin-bottom: 12px;
}
.discount-bar-container {
position: relative;
width: 400px;
height: 30px;
border: 1px solid black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.discount-bar-container .discount-bar {
position: absolute;
display: block;
height: 100%;
width: 0;
background-color: red;
transition: width 0.4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="discount">Choose a value :</label>
<select name="discount" id="discount">
<option value="0">0%</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<div class="discount-bar-container">
<div class="discount-bar" id="discount-bar"></div>
</div>