datalist vertical scroll not working in chrome

datalist vertical scroll not working in chrome - javascript

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>

Related

How do i add all the circled inputs when i click "add more" button and remove unnecessary inputs altogether circled when i click "remove" button

Current Image of what it looks and needs.
Please help me out in this. I have been trying to add two buttons where it can give the input box again same in the form where the inputs that start in the fieldset called Type of Land and remove it when i click remove button. All the inputs in the fieldset called type of land should be appeared again when i click add more button. As you can in the image of the screen where the circle i drew and the arrow that indicates the buttons there where all the input circled should again appear when i click the button, & the button should let any infinite number of times of input including within inside the fieldset. This is a form where a person is trying to get details and trying to add "n" number of lands where he/she is either interested in buying or for suggesting it to someone.
This is html down below
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Survey-Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper container">
<form id="survey-form" autocapitalize="off" method="POST" name="google-sheet" action="dynaform.php" onSubmit="alert('Thank you for submitting your details. We will be Contacting you very soon. ');" class="" >
<h1 id="title">Chevella Customer Lead Form</h1>
<hr>
<hr>
<p id="description"><b>Note:</b> Please enter the following details to receive leads and inquires about the
Land in Chevella Mandal.</p>
<!-- ------------------Language Selection------------------------ -->
<hr class="space">
<hr class="space">
<fieldset>
<legend id="head">Select Language</legend>
<div id="google_translate_element"></div>
</fieldset>
<!-- ------------------Personal Details------------------------ -->
<hr>
<fieldset>
<legend id="head">Personal Details</legend>
<div>
<label id="name-label" for="name">Name:</label>
<input type="text" required id="Name" name="Name" placeholder="Enter your name" class="form-control">
</div>
<div>
<label for="address-label">Address:</label>
<input type="Address" id="Address" name="Address" placeholder="Enter your address" class="form-control" required>
</div>
<div>
<label id="number-label" for="phone">Phone Number/Whatsapp:</label>
<input type="number" id="Phone Number" name="PhoneNumber" placeholder="Enter 10 digit number"
min="0000000000" max="9999999999999" class="form-control" required>
</div>
<!-- ------------------Radio Buttons-------------------------------- -->
<div>
<label for="Gender">Gender</label>
<p>
<input type="radio" name="Gender" value="Male" class="input-radio" > Male<br>
<input type="radio" name="Gender" value="Female" class="input-radio"> Female<br>
<input type="radio" name="Gender" value="Other" class="input-radio"> Other
</p>
</div>
<label for="date-label">Date of Birth:</label>
<input type="Date" name="DateOfBirth" id="Date of Birth" class="form-control" required>
</fieldset>
<hr class="space">
<!-- ------------------Checkboxes-------------------------------- -->
<fieldset>
<legend id="head">Type of Land</legend>
<label for="Gender"></label>
<div class="village">
<label id="Village" for="vilage"><h4>Village:</label>
<select id="dropdown0" name="Village" required>
<option value="none">
'Select'</option>
<option value="Allawada">
Allawada</otion>
<option value="AloorI">
Aloor I</option>
<option value="AloorII">
Aloor II</option>
<option value="AloorIII">
Aloor III</option>
<option value="Anantawaram">
Anantawaram</option>
<option value="Bastepur">
Bastepur</option>
<option value="Chanvelli">
Chanvelli</option>
<option value="Chevella">
Chevella</option>
<option value="Damerigidda">
Damerigidda</option>
<option value="Dearlapalle">
Dearlapalle</option>
<option value="Devarampalle">
Devarampalle</option>
<option value="Devuni Erravelly">
Devuni Erravelly</option>
<option value="Gollapalle">
Gollapalle</option>
<option value="Gundal">
Gundal</option>
<option value="Hasthepur">
Hasthepur</option>
<option value="Ibrahimpalle">
Ibrahimpalle</option>
<option value="Kammeta">
Kammeta</option>
<option value="Kanduwada">
Kanduwada</option>
<option value="Kesavaram">
Kesavaram</option>
<option value="Khanapur">
Khanapur</option>
<option value="Kistapur">
Kistapur</option>
<option value="Kowkuntla">
Kowkuntla</option>
<option value="Kummera">
Kummera</option>
<option value="Malkapur">
Malkapur</option>
<option value="Mudimyal">
Mudimyal</option>
<option value="Naincheru">
Naincheru</option>
<option value="Nowlaipalle">
Nowlaipalle</option>
<option value="Nyalata">
Nyalata</option>
<option value="Orella">
Orella</option>
<option value="Pamena">
Pamena</option>
<option value="Ravulapalle(Khurd)">
Ravulapalle (Khurd)</option>
<option value="Regadghanapur">
Regadghanapur</option>
<option value="Tallaram">
Tallaram</option>
<option value="Tangedapalle">
Tangedapalle</option>
<option value="Yenkepalle">
Yenkepalle</option>
</select>
<ol>
<li><h4>Main Highway or Main Road</h4></li>
<label id="Village" for="village">(per acre):</label>
<select id="dropdown1" name="Row" required>
<option value="none">
'Select'</option>
<option value="Row1">
Row 1</option>
<option value="Row2">
Row 2</option>
<option value="Row3">
Row 3</option>
<option value="Row4">
Row 4</option>
<option value="Row5">
Row 5</option>
<option value="Row6">
Row 6</option>
</select>
<select id="dropdown3" name="Column">
<option value="None">
'Select'</option>
<option value="Column1">
Column 1</otion>
<option value="Column2">
Column 2</option>
<option value="Column3">
Column 3</option>
<option value="Column4">
Column 4</option>
<option value="Column5">
Column 5</option>
<option value="Column6">
Column 6</option>
</select>
<li><h4>Sub Road</h4></li>
<ul><li>1 km:</li>
<label id="Village" for="village">(per acre):</label>
<select id="dropdown1" name="Row" required>
<option value="none">
'Select'</option>
<option value="Row1">
Row 1</option>
<option value="Row2">
Row 2</option>
<option value="Row3">
Row 3</option>
<option value="Row4">
Row 4</option>
<option value="Row5">
Row 5</option>
<option value="Row6">
Row 6</option>
</select>
<select id="dropdown3" name="Column">
<option value="None">
'Select'</option>
<option value="Column1">
Column 1</otion>
<option value="Column2">
Column 2</option>
<option value="Column3">
Column 3</option>
<option value="Column4">
Column 4</option>
<option value="Column5">
Column 5</option>
<option value="Column6">
Column 6</option>
</select>
<li>Above 2km:</li>
<label id="Village" for="village">(per acre):</label>
<select id="dropdown1" name="Row" required>
<option value="none">
'Select'</option>
<option value="Row1">
Row 1</option>
<option value="Row2">
Row 2</option>
<option value="Row3">
Row 3</option>
<option value="Row4">
Row 4</option>
<option value="Row5">
Row 5</option>
<option value="Row6">
Row 6</option>
</select>
<select id="dropdown3" name="Column">
<option value="None">
'Select'</option>
<option value="Column1">
Column 1</otion>
<option value="Column2">
Column 2</option>
<option value="Column3">
Column 3</option>
<option value="Column4">
Column 4</option>
<option value="Column5">
Column 5</option>
<option value="Column6">
Column 6</option>
</select>
<li>upto 4km:</li>
<label id="Village" for="village">(per acre):</label>
<select id="dropdown1" name="Row" required>
<option value="none">
'Select'</option>
<option value="Row1">
Row 1</option>
<option value="Row2">
Row 2</option>
<option value="Row3">
Row 3</option>
<option value="Row4">
Row 4</option>
<option value="Row5">
Row 5</option>
<option value="Row6">
Row 6</option>
</select>
<select id="dropdown3" name="Column">
<option value="None">
'Select'</option>
<option value="Column1">
Column 1</otion>
<option value="Column2">
Column 2</option>
<option value="Column3">
Column 3</option>
<option value="Column4">
Column 4</option>
<option value="Column5">
Column 5</option>
<option value="Column6">
Column 6</option>
</select>
</ul>
<li><h4>Bandi Rasta or Kart Rasta</h4></li>
<label id="Village" for="village">(per acre):</label>
<select id="dropdown1" name="Row" required>
<option value="none">
'Select'</option>
<option value="Row1">
Row 1</option>
<option value="Row2">
Row 2</option>
<option value="Row3">
Row 3</option>
<option value="Row4">
Row 4</option>
<option value="Row5">
Row 5</option>
<option value="Row6">
Row 6</option>
</select>
<select id="dropdown3" name="Column">
<option value="None">
'Select'</option>
<option value="Column1">
Column 1</otion>
<option value="Column2">
Column 2</option>
<option value="Column3">
Column 3</option>
<option value="Column4">
Column 4</option>
<option value="Column5">
Column 5</option>
<option value="Column6">
Column 6</option>
</select>
<li><h4>Without Road Access</h4></li>
<label id="Village" for="village">(per acre):</label>
<select id="dropdown1" name="Row" required>
<option value="none">
'Select'</option>
<option value="Row1">
Row 1</option>
<option value="Row2">
Row 2</option>
<option value="Row3">
Row 3</option>
<option value="Row4">
Row 4</option>
<option value="Row5">
Row 5</option>
<option value="Row6">
Row 6</option>
</select>
<select id="dropdown3" name="Column">
<option value="None">
'Select'</option>
<option value="Column1">
Column 1</otion>
<option value="Column2">
Column 2</option>
<option value="Column3">
Column 3</option>
<option value="Column4">
Column 4</option>
<option value="Column5">
Column 5</option>
<option value="Column6">
Column 6</option>
</select>
</ol>
</h4>
<h3 id="head">Title/Legility</h3>
<select id="dropdown2" name="clear-litigation" class="dropdown2">
<option value="none">
'Select'</option>
<option value="clear">
Clear</option>
<option value="litigation">
Litigation</option>
</select>
</div>
</fieldset>
<!-- -----------------------smth------------------------------- -->
<br><br>
<hr class="space">
<!-- ------------------------wasssup--------------------------- -->
<fieldset>
<legend id="head">Essay Section</legend>
<p>Provide a Bio</p>
<div>
<label for="msg"></label>
<textarea class="space1" id="Essay" name="Essay" rows="10" cols="90" placeholder="Message"></textarea>
</div>
<hr>
<div>
<label for="msg">Please upload contact details for references</label><br>
<textarea id="contact details" name="userMessage" rows="10" cols="90"
placeholder="Contact Details" required></textarea>
</div>
</fieldset>
<div class="wrapper">
<button class="btn-13" type="submit" id="submit" name="submit" ><span>Submit</span></button>
</div>
</div>
</form>
</div>
</form>
</body>
</html>```
This is css down below
```#import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');
:root {
--color-darkblue-alpha: rgba(247, 249, 250, 0.9);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: Poppins, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.4;
color: var(--color-black);
margin: 0;
}
/* mobile friendly alternative to using background-attachment: fixed */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: var(--color-darkblue);
background-image: linear-gradient(
180deg,
rgba(0, 100, 0 , 0),
rgba(0, 160, 10, 0)
),
url(https://i.pinimg.com/564x/43/45/a9/4345a99449df1fe9ea55e0085a8fd709.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
h1 {
font-weight: 500;
line-height: 1.9;
font-family: Poppins;
font-size: 40px;
Letter-spacing: -3px;
}
#description {
font-size: 1.125rem;
font-family: Poppins;
}
h1,
p {
margin-top: 0;
margin-bottom: 0rem;
}
label, Input, fieldset{
align-items: center;
font-size: 1.125rem;
margin-bottom: 0.5rem;
padding: 18px
}
.container {
width: 100%;
margin: 3.125rem auto 0 auto;
}
#media (min-width: 576px) {
.container {
max-width: 540px;
}
}
#media (min-width: 375px) {
.container {
max-width: 812px;
}
}
.header {
padding: 5 0rem;
margin-bottom: 1.875rem;
}
#head, #description {
font-size: 24px;
}
.clue {
margin-left: 0.25rem;
font-size: 0.9rem;
color: #e4e4e4;
}
.text-center {
text-align: center;
}
/* form */
form {
background: var(--color-darkblue-alpha);
padding: 2.5rem 0.625rem;
border-radius: 04rem;
border: 3px solid #dadce0;
margin-bottom: 3rem;
}
#media (min-width: 480px) {
form {
padding: 1.5rem;
}
}
.form-group {
margin: 0 auto 1.25rem auto;
padding: 0.25rem;
}
.form-control {
display: block;
width: 55%;
height: 2.595rem;
padding: 0.375rem 0.99rem;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 04rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
margin: 2px
}
.form-control:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.input-radio,
.input-checkbox {
display: inline-block;
margin-right: 0.425rem;
min-height: 1.5rem;
min-width: 3.25rem;
}
.input-textarea {
min-height: 120px;
width: 100%;
padding: 0.325rem;
resize: verticle;
border-radius: 6px
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.village {
display: flex;
align-items: left;
justify-content: left;
margin: -50px 30px 05px -20px;
}
a{
text-decoration: none;
}
.btn-13 {
display: block;
width: 200px;
height: 50px;
line-height: 40px;
font-size: 10px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
font-size: 10px;
border-radius:
}
.btn-13 span{
position: relative;
z-index: 2;
}
.btn-13:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgb(159, 90, 253);
transition: all .35s;
border-radius:32px;
}
.btn-13:hover {
color: #ffff;
font-weight: 500;
transition: all .1s;
border-radius:25px;
}
.btn-13:hover:after {
width: 100%;
}
#media (max-width: 140px) {
#outside {
padding: 0 .2rem;
}
html {
font-size: auto;
overflow-x: hidden;
}
.btn-13 {
size: px;
}
}
textarea {
width: 330px;
height: 85px;
border-radius: 14px;
font-size: 18px;
}
#title {
font-size: 55px
}
fieldset {
border-radius: 22px;
justify-content: center;
margin: 20px 50px 20px 50px;
}
.space1 {
margin-left: -35px
}
span {
font-size: 15px;
}
select {
margin: 6px ;
font-size: 16px
}```

My select input calculator is not working, how can I figure out why?

I am working on a calculator that pics values from 4 select dropdowns real time, and goes on to update three divs below based on whatever the selected values are.
However I keep getting NaN for two of the answer divs.
My console.log is clean so I cannot get where this is coming from.
document.querySelector("select").onchange = function() {
recalculate()
};
function recalculate() {
var locations = document.getElementById('locations').value;
var average_price = document.getElementById('average_price').value;
var donation_rate = document.getElementById('donation_rate').value;
var customers_number = document.getElementById('customers_number').value;
var sales_result = document.getElementById('sales_result').innerHTML;
var customers_result = document.getElementById('customers_result').innerHTML;
var donations_result = document.getElementById('donations_result').innerHTML;
var weeksInYear = 52;
//customers_result = locations * weeksInYear * customers_number;
//donations_result = donation_rate * customers_number* locations * average_price;
//sales_result = locations * customers_result * average_price;
document.getElementById('customers_result').innerHTML = locations * weeksInYear * customers_number;
document.getElementById('donations_result').innerHTML = donation_rate * customers_number * locations * average_price;
document.getElementById('sales_result').innerHTML = locations * customers_result * average_price;
};
.ng-scope {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
line-height: 1.42867;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 22px;
box-sizing: border-box;
}
#restaurant-landing .section-margins {
margin-top: 12px;
margin-bottom: 12px;
}
.row {
width: 90%;
margin-left: 50px;
margin-right: 50px;
}
#restaurant-landing {
font-size: 22px;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col-xs-12 {
float: left;
width: 100%;
position: relative;
min-height: 1px;
}
.calculator-fields {
font-size: 22px;
line-height: 39px;
border-radius: 12px;
margin-top: 12px;
margin-bottom: 12px;
overflow: hidden;
*zoom: 1;
background-color: #2a4563;
padding: 12px 30px;
display: block;
}
.col-xs-3 {
padding-left: 15px;
padding-right: 15px;
}
.field-wrapper {
margin-left: -15px;
margin-right: -15px;
overflow: hidden;
*zoom: 1;
}
.calc-label {
float: left;
width: 58.33333%;
color: #ffffff;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
.calc-field {
float: left;
width: 41.66667%;
}
.col-md-4 {
width: 33.33333%;
}
.result-box {
margin-top: 12px;
font-family: 'Arvo', serif;
background-color: #54822b;
padding-top: 16px;
padding-bottom: 4px;
text-align: center;
font-weight: bold;
}
.result-number {
font-size: 48px;
line-height: 62px;
color: white;
}
.result-label {
font-size: 22px;
line-height: 28.6px;
color: black;
padding-bottom: 4px;
text-align: center;
font-weight: bold;
}
<!doctype HTML>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="ng-scope">
<div class="row">
<div class="col-xs-12">
<div class="calculator-fields">
<div class="col-xs-3">
<div class="field-wrapper">
<div class="calc-label">
<label for="locations"><span class="hidden-xs"># of </span>locations:</label>
</div>
<div class="calc-field">
<select name="locations" id="locations">
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5" selected="selected">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
<option label="10" value="10">10</option>
<option label="15" value="15">15</option>
<option label="20" value="20">20</option>
<option label="25" value="25">25</option>
<option label="40" value="40">40</option>
<option label="50" value="50">50</option>
<option label="100" value="100">100</option>
<option label="200" value="200">200</option>
<option label="300" value="300">300</option>
<option label="400" value="400">400</option>
<option label="500" value="500">500</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-3">
<div class="field-wrapper">
<div class="calc-label">
<label for="average_price">avg. <span class="hidden-xs">ticket </span>price:</label>
</div>
<div class="calc-field">
<select name="average_price" id="average_price">
<option label="$4" value="4">$4</option>
<option label="$5" value="5">$5</option>
<option label="$6" value="6">$6</option>
<option label="$7" value="7">$7</option>
<option label="$8" value="string:$8">$8</option>
<option label="$9" value="string:$9">$9</option>
<option label="$10" value="string:$10">$10</option>
<option label="$11" value="string:$11">$11</option>
<option label="$12" value="string:$12" selected="selected">$12</option>
<option label="$13" value="string:$13">$13</option>
<option label="$14" value="string:$14">$14</option>
<option label="$15" value="string:$15">$15</option>
<option label="$16" value="string:$16">$16</option>
<option label="$17" value="string:$17">$17</option>
<option label="$18" value="string:$18">$18</option>
<option label="$19" value="string:$19">$19</option>
<option label="$20" value="string:$20">$20</option>
<option label="$25" value="string:$25">$25</option>
<option label="$30" value="string:$30">$30</option>
<option label="$35" value="string:$35">$35</option>
<option label="$40" value="string:$40">$40</option>
<option label="$45" value="string:$45">$45</option>
<option label="$50" value="string:$50">$50</option>
<option label="$75" value="string:$75">$75</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-3">
<div class="field-wrapper">
<div class="calc-label">
<label for="donation_rate">donation:</label>
</div>
<div class="calc-field">
<select name="donation_rate" id="donation_rate">
<option label="15%" value="0.15">15%</option>
<option label="20%" value="0.20">20%</option>
<option label="25%" value="0.25">25%</option>
<option label="33%" value="0.33">33%</option>
<option label="40%" value="0.40">40%</option>
<option label="45%" value="0.45">45%</option>
<option label="50%" value="0.50">50%</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-3">
<div class="field-wrapper">
<div class="calc-label">
<label for="customers-number"># Customers:</label>
</div>
<div class="calc-field">
<select name="customers_number" id="customers_number">
<option label="10" value="10">10</option>
<option label="20" value="20">20</option>
<option label="30" value="30">30</option>
<option label="35" value="35">35</option>
<option label="40" value="40">40</option>
<option label="45" value="45">45</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="calculator-results">
<div class="col-xs-12 col-md-4">
<div class="result-box">
<div id="sales_result" class="result-number ng-binding">$11,440</div>
<div class="result-label">sales</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="result-box result-left-mobile">
<div id="customers_result" class="result-number ng-binding">2,860</div>
<div class="result-label">customers</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="result-box result-right-mobile">
<div id="donations_result" class="result-number ng-binding">$1,716</div>
<div class="result-label">donations</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

There is a lot that I do not like about this but this fixes the NaN issue
document.querySelector("select").onchange = function() {
recalculate()
};
function recalculate() {
var locations = parseFloat(document.getElementById('locations').value);
var average_price = parseFloat(document.getElementById('average_price').value);
var donation_rate = parseFloat(document.getElementById('donation_rate').value);
var customers_number = parseFloat(document.getElementById('customers_number').value);
var sales_result = document.getElementById('sales_result');
var customers_result = document.getElementById('customers_result');
var donations_result = document.getElementById('donations_result');
var weeksInYear = 52;
customers_result.innerHTML = locations * weeksInYear * customers_number;
donations_result.innerHTML = donation_rate * customers_number * locations * average_price;
sales_result.innerHTML = locations * customers_result * average_price;
};
.ng-scope {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
line-height: 1.42867;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 22px;
box-sizing: border-box;
}
#restaurant-landing .section-margins {
margin-top: 12px;
margin-bottom: 12px;
}
.row {
width: 90%;
margin-left: 50px;
margin-right: 50px;
}
#restaurant-landing {
font-size: 22px;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col-xs-12 {
float: left;
width: 100%;
position: relative;
min-height: 1px;
}
.calculator-fields {
font-size: 22px;
line-height: 39px;
border-radius: 12px;
margin-top: 12px;
margin-bottom: 12px;
overflow: hidden;
*zoom: 1;
background-color: #2a4563;
padding: 12px 30px;
display: block;
}
.col-xs-3 {
padding-left: 15px;
padding-right: 15px;
}
.field-wrapper {
margin-left: -15px;
margin-right: -15px;
overflow: hidden;
*zoom: 1;
}
.calc-label {
float: left;
width: 58.33333%;
color: #ffffff;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
.calc-field {
float: left;
width: 41.66667%;
}
.col-md-4 {
width: 33.33333%;
}
.result-box {
margin-top: 12px;
font-family: 'Arvo', serif;
background-color: #54822b;
padding-top: 16px;
padding-bottom: 4px;
text-align: center;
font-weight: bold;
}
.result-number {
font-size: 48px;
line-height: 62px;
color: white;
}
.result-label {
font-size: 22px;
line-height: 28.6px;
color: black;
padding-bottom: 4px;
text-align: center;
font-weight: bold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>
<div class="ng-scope">
<div class="row">
<div class="col-xs-12">
<div class="calculator-fields">
<div class="col-xs-3">
<div class="field-wrapper">
<div class="calc-label">
<label for="locations"><span class="hidden-xs"># of </span>locations:</label>
</div>
<div class="calc-field">
<select name="locations" id="locations">
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5" selected="selected">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
<option label="10" value="10">10</option>
<option label="15" value="15">15</option>
<option label="20" value="20">20</option>
<option label="25" value="25">25</option>
<option label="40" value="40">40</option>
<option label="50" value="50">50</option>
<option label="100" value="100">100</option>
<option label="200" value="200">200</option>
<option label="300" value="300">300</option>
<option label="400" value="400">400</option>
<option label="500" value="500">500</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-3">
<div class="field-wrapper">
<div class="calc-label">
<label for="average_price">avg. <span class="hidden-xs">ticket </span>price:</label>
</div>
<div class="calc-field">
<select name="average_price" id="average_price">
<option label="$4" value="4">$4</option>
<option label="$5" value="5">$5</option>
<option label="$6" value="6">$6</option>
<option label="$7" value="7">$7</option>
<option label="$8" value="8">$8</option>
<option label="$9" value="9">$9</option>
<option label="$10" value="10">$10</option>
<option label="$11" value="11">$11</option>
<option label="$12" value="12" selected="selected">$12</option>
<option label="$13" value="13">$13</option>
<option label="$14" value="14">$14</option>
<option label="$15" value="15">$15</option>
<option label="$16" value="16">$16</option>
<option label="$17" value="17">$17</option>
<option label="$18" value="18">$18</option>
<option label="$19" value="19">$19</option>
<option label="$20" value="20">$20</option>
<option label="$25" value="25">$25</option>
<option label="$30" value="30">$30</option>
<option label="$35" value="35">$35</option>
<option label="$40" value="40">$40</option>
<option label="$45" value="45">$45</option>
<option label="$50" value="50">$50</option>
<option label="$75" value="75">$75</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-3">
<div class="field-wrapper">
<div class="calc-label">
<label for="donation_rate">donation:</label>
</div>
<div class="calc-field">
<select name="donation_rate" id="donation_rate">
<option label="15%" value="0.15">15%</option>
<option label="20%" value="0.20">20%</option>
<option label="25%" value="0.25">25%</option>
<option label="33%" value="0.33">33%</option>
<option label="40%" value="0.40">40%</option>
<option label="45%" value="0.45">45%</option>
<option label="50%" value="0.50">50%</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-3">
<div class="field-wrapper">
<div class="calc-label">
<label for="customers-number"># Customers:</label>
</div>
<div class="calc-field">
<select name="customers_number" id="customers_number">
<option label="10" value="10">10</option>
<option label="20" value="20">20</option>
<option label="30" value="30">30</option>
<option label="35" value="35">35</option>
<option label="40" value="40">40</option>
<option label="45" value="45">45</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="calculator-results">
<div class="col-xs-12 col-md-4">
<div class="result-box">
<div id="sales_result" class="result-number ng-binding">$11,440</div>
<div class="result-label">sales</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="result-box result-left-mobile">
<div id="customers_result" class="result-number ng-binding">2,860</div>
<div class="result-label">customers</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="result-box result-right-mobile">
<div id="donations_result" class="result-number ng-binding">$1,716</div>
<div class="result-label">donations</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

iframe doesn't show its content

I have created an iframe per dropdown.
So here is the html, css and JS:
$(function(){
$('#klanten-lijst').on('change',function(){
$('#klanten div').hide();
$('.klant-'+this.value).show();
});
});
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 45px;
overflow: hidden;
width: 500px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 16px;
height: 45px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 520px;
}
.styled-select.slate {
background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
height: 45px;
width: 500px;
}
.styled-select.slate select {
border: 1px solid #ccc;
font-size: 16px;
height: 45px;
width: 520px;
}
<div>
<h2 style="margin: 0 0 0px 20px">Klanten</h2>
<div class="styled-select slate" style="position:fixed;margin-left:20px;">
<select name="klanten" id="klanten-lijst">
<option>Klanten<option>
<option value="1">7LAB LLP</option>
<option value="2">A.Tuin Den Helder B.V.</option>
<option id="option3" value="3">Ace Accounting</option>
<option id="option4" value="4">Administratiekantoor A.C. Koenen</option>
<option id="option5" value="5">Advocatenkantoor Roos</option>
<option id="option6" value="6">Afix</option>
<option id="option7" value="7">Agratechniek</option>
<option id="option8" value="8">Anne van Dalen</option>
<option id="option9" value="9">App-vise</option>
<option id="option10" value="10">Arlette Hazevoet</option>
<option id="option11" value="11">Asko Schoonmaak- en Bedrijfsdiensten B.V.</option>
<option id="option12" value="12">ATAL B.V.</option>
<option id="option13" value="13">Australian Backpackers B.V.</option>
<option id="option14" value="14">Blommestein Gevelonderhoud</option>
<option id="option15" value="15">Blooming bedrijvengroep B.V.</option>
<option id="option16" value="16">Borst Bedden B.V.</option>
<option id="option17" value="17">Bouwbedrijf J. Nat. & Zn. B.V.</option>
<option id="option18" value="18">BouwBoxr B.V.</option>
<option id="option19" value="19">Broersma & De Boer Bouwadviesgroep B.V.</option>
<option id="option20" value="20">Bruin Assurantiën</option>
<option id="option21" value="21">Bureau Gras</option>
<option id="option22" value="22">Bureau4 V.O.F. </option>
<option id="option23" value="23">Business Center Bonne Chance B.V.</option>
<option id="option24" value="24">C.B.M. Poland</option>
<option id="option25" value="25">CaseWare Nederland B.V.</option>
<option id="option26" value="26">ColorCrew</option>
<option value="27">Coos</option>
<option value="28">Coperatieve Dienstverlening Heerhugowaard U.A.</option>
<option value="29"></option>
<option value="30"></option>
<option value="31"></option>
<option value="32"></option>
<option value="33"></option>
</select>
<div id="klanten">
<div class="klant-1" hidden>
<iframe src="../klanten/7LAB LLP.html" style="height:410px;width:1880px;"></iframe>
</div>
<div class="klant-2" hidden>
<iframe src="../paginas/home.html" style="height:410px;width:1880px;"></iframe>
</div>
</div>
<script src="../scripts/klant-reveal.js"></script>
</div>
</div>
I don't understand why it isn't working and I have been breaking my brain over this for a little while now.
Its funny because when I change "hidden" by hand to "show" in F12 on the site it does show the frame with the mouse, but not the content itself.
Soo I have no clue where it could go wrong!
Thanks in advance,
Roel

Don't use hidden attribute, if so then try removing the attribute.
JQuery .show() changes css display to block or inline-block according to the element used.
So, either remove hidden attribute from the element using jQuery or
don't use hidden attribute instead do display:none on all the elements in css, so it will be hidden until selection is done. On selection, use jquery.show()
For reference:
$(function() {
$('#klanten-lijst').on('change', function() {
$('#klanten div').hide();
$('.klant-' + this.value).show();
});
});
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 45px;
overflow: hidden;
width: 500px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 16px;
height: 45px;
padding: 5px;
/* If you add too much padding here, the options won't show in IE */
width: 520px;
}
.styled-select.slate {
background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
height: 45px;
width: 500px;
}
.styled-select.slate select {
border: 1px solid #ccc;
font-size: 16px;
height: 45px;
width: 520px;
}
#klanten {
margin-top: 50px;
}
#klanten div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h2 style="margin: 0 0 0px 20px">Klanten</h2>
<div class="styled-select slate" style="position:fixed;margin-left:20px;">
<select name="klanten" id="klanten-lijst">
<option>Klanten</option>
<option value="1">7LAB LLP</option>
<option value="2">A.Tuin Den Helder B.V.</option>
<option id="option3" value="3">Ace Accounting</option>
<option id="option4" value="4">Administratiekantoor A.C. Koenen</option>
<option id="option5" value="5">Advocatenkantoor Roos</option>
<option id="option6" value="6">Afix</option>
<option id="option7" value="7">Agratechniek</option>
<option id="option8" value="8">Anne van Dalen</option>
<option id="option9" value="9">App-vise</option>
<option id="option10" value="10">Arlette Hazevoet</option>
<option id="option11" value="11">Asko Schoonmaak- en Bedrijfsdiensten B.V.</option>
<option id="option12" value="12">ATAL B.V.</option>
<option id="option13" value="13">Australian Backpackers B.V.</option>
<option id="option14" value="14">Blommestein Gevelonderhoud</option>
<option id="option15" value="15">Blooming bedrijvengroep B.V.</option>
<option id="option16" value="16">Borst Bedden B.V.</option>
<option id="option17" value="17">Bouwbedrijf J. Nat. & Zn. B.V.</option>
<option id="option18" value="18">BouwBoxr B.V.</option>
<option id="option19" value="19">Broersma & De Boer Bouwadviesgroep B.V.</option>
<option id="option20" value="20">Bruin Assurantiën</option>
<option id="option21" value="21">Bureau Gras</option>
<option id="option22" value="22">Bureau4 V.O.F. </option>
<option id="option23" value="23">Business Center Bonne Chance B.V.</option>
<option id="option24" value="24">C.B.M. Poland</option>
<option id="option25" value="25">CaseWare Nederland B.V.</option>
<option id="option26" value="26">ColorCrew</option>
<option value="27">Coos</option>
<option value="28">Coperatieve Dienstverlening Heerhugowaard U.A.</option>
<option value="29"></option>
<option value="30"></option>
<option value="31"></option>
<option value="32"></option>
<option value="33"></option>
</select>
</div>
<div id="klanten">
<div class="klant-1">
<iframe src="https://jsfiddle.net/q20yjtrh/2/" style="height:200px;width:500px;"></iframe>
</div>
<div class="klant-2">
<iframe src="https://jsfiddle.net/q20yjtrh/2/" style="height:200px;width:500px;"></iframe>
</div>
</div>
</div>

You don't import the jquery library to your html,'$' can't do anything.
$(function(){
$('#klanten-lijst').on('change',function(){
//$('#klanten div').hide();
//$('.klant-'+this.value).show();
});
});
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 45px;
overflow: hidden;
width: 500px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 16px;
height: 45px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 520px;
}
.styled-select.slate {
background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
height: 45px;
width: 500px;
}
.styled-select.slate select {
border: 1px solid #ccc;
font-size: 16px;
height: 45px;
width: 520px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div>
<h2 style="margin: 0 0 0px 20px">Klanten</h2>
<div class="styled-select slate" style="position:fixed;margin-left:20px;">
<select name="klanten" id="klanten-lijst">
<option>Klanten<option>
<option value="1">7LAB LLP</option>
<option value="2">A.Tuin Den Helder B.V.</option>
<option id="option3" value="3">Ace Accounting</option>
<option id="option4" value="4">Administratiekantoor A.C. Koenen</option>
<option id="option5" value="5">Advocatenkantoor Roos</option>
<option id="option6" value="6">Afix</option>
<option id="option7" value="7">Agratechniek</option>
<option id="option8" value="8">Anne van Dalen</option>
<option id="option9" value="9">App-vise</option>
<option id="option10" value="10">Arlette Hazevoet</option>
<option id="option11" value="11">Asko Schoonmaak- en Bedrijfsdiensten B.V.</option>
<option id="option12" value="12">ATAL B.V.</option>
<option id="option13" value="13">Australian Backpackers B.V.</option>
<option id="option14" value="14">Blommestein Gevelonderhoud</option>
<option id="option15" value="15">Blooming bedrijvengroep B.V.</option>
<option id="option16" value="16">Borst Bedden B.V.</option>
<option id="option17" value="17">Bouwbedrijf J. Nat. & Zn. B.V.</option>
<option id="option18" value="18">BouwBoxr B.V.</option>
<option id="option19" value="19">Broersma & De Boer Bouwadviesgroep B.V.</option>
<option id="option20" value="20">Bruin Assurantiën</option>
<option id="option21" value="21">Bureau Gras</option>
<option id="option22" value="22">Bureau4 V.O.F. </option>
<option id="option23" value="23">Business Center Bonne Chance B.V.</option>
<option id="option24" value="24">C.B.M. Poland</option>
<option id="option25" value="25">CaseWare Nederland B.V.</option>
<option id="option26" value="26">ColorCrew</option>
<option value="27">Coos</option>
<option value="28">Coperatieve Dienstverlening Heerhugowaard U.A.</option>
<option value="29"></option>
<option value="30"></option>
<option value="31"></option>
<option value="32"></option>
<option value="33"></option>
</select>
<div id="klanten">
<div class="klant-1" hidden>
<iframe src="../klanten/7LAB LLP.html" style="height:410px;width:1880px;"></iframe>
</div>
<div class="klant-2" hidden>
<iframe src="../paginas/home.html" style="height:410px;width:1880px;"></iframe>
</div>
</div>
<script src="../scripts/klant-reveal.js"></script>
</div>
</div>

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>

jQuery picklist: shows only one

When using the jquery picklist (from: https://code.google.com/p/jquery-ui-picklist/) I only get one list instead of 2 (left and right). Any ideas?
I almost copy pasted all from http://jsfiddle.net/awnry/ScX4S/
HTML code:
<html>
<head>
<title>TestSite</title>
<link href="./css/test.css" rel="stylesheet">
</head>
<body>
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
<script src="./scripts/test.js"></script>
<div>
<select name="basic" id="basic" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected="selected">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</body>
</html>
JS Code:
$(document).ready(function() {
$("#basic").picklist();
});
CSS Code:
body { margin: 0.5em; }
.pickList_sourceListContainer, .pickList_controlsContainer, `.pickList_targetListContainer { float: left; margin: 0.25em; }`
.pickList_controlsContainer { text-align: center; }
.pickList_controlsContainer button { display: block; width: 100%; text-align: center; }
.pickList_list { list-style-type: none; margin: 0; padding: 0; float: left; width: 150px; height: 75px; border: 1px inset #eee; overflow-y: auto; cursor: default; }
.pickList_selectedListItem { background-color: #a3c8f5; }
.pickList_listLabel { font-size: 0.9em; font-weight: bold; text-align: center; }
.pickList_clear { clear: both; }

In your code, Change
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
to
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
Reason : You should include reference jquery UI widget before picklist. (Check the ordering in the fiddle)
The ordering matters as picklist refers the former(jquery UI widget library) for its functionality - Reference.

We Keep Coding

JavaScript is the programming language of the Web.

datalist vertical scroll not working in chrome - javascript

Related

How do i add all the circled inputs when i click "add more" button and remove unnecessary inputs altogether circled when i click "remove" button

My select input calculator is not working, how can I figure out why?

iframe doesn't show its content

How to design step progress bar using jquery,css

jQuery picklist: shows only one

Categories

Resources