Image-dropdown with callback function

Image-dropdown with callback function - javascript

My goal is to implement multiple dropdown fields that contain images, are positioned under each other, and that each have a JavaScript function assigned to them I can trigger by a button later on. Roughly saying like "oh, this and this and this got selected, press the button and trigger all the selected functions). The "add-to-cart" Cartjs.additem() function is working proper already, just not in this dropdown environment. I feel I got way over my head of course.
This is my code so far:
$('#options').ddslick();
<style class="cp-pen-styles">*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid__spans-25 {
width: 100%;
padding: 1em;
}
#media screen and (min-width: 48em) {
.grid__spans-25 {
width: 25%;
}
}
#options,
.dd-select,
.dd-options {
width: 100% !important;
}
.dd-selected-text,
.dd-option-text {
line-height: 64px !important;
}
.dd-select {
background: #fff !important;
border-color: #d1d3d4 !important;
border-radius: 0 !important;
}
.dd-selected {
font-weight: normal !important;
}
label {
display: block;
}
input[type="text"], input[type="name"], input[type="email"], input[type="tel"], input[type="password"], select {
background: transparent;
width: 100%;
height: 42px;
padding: 10px;
display: block;
border: 1px solid #d1d3d4;
border-radius: 0;
outline: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
<section class="grid">
<div>
<label for="options">Label</label>
<select id="options" class="test">
<option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
<option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
<option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
<option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
<option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
</select>
</div>
</section>
<section>
<div class="grid__spans-25">
<label for="options">Label</label>
<select id="options" class="test">
<option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
<option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
<option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
<option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
<option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
</select>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>
</script><script src='https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.min.js'></script>
My issue on hand is that a second added dropdown isn't working proper anymore.
I am hoping someone can push me in the right direction or recommend a solution that is easier to implement.
UPDATE
I was able to get the dropdown select and button trigger working. The issue I am having now is that in order to get the pictures added to the dropdown, I need to include the following function:
$('#options').ddslick();
This stops the dropdown from forwarding any value though, the forwarded value is shown as "undefined". Right now it's an either or.
Here is the whole code. The latter two would not prompt a value if I added $('#list1').ddslick(); or $('#list2').ddslick();
<ul class="flex-container">
<li class="flex-item">
<section class="grid__spans-25">
<div >
<label for="options">Label</label>
<select id="options" class="test">
<option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
<option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
<option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
<option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
<option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
</select>
</div>
</section>
</li>
<li class="flex-item">
<section class="grid__spans-25">
<select id="list1">
<option value="9107763265579">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
</select>
</section>
</li>
<li class="flex-item">
<section class="grid__spans-25">
<select id="list2">
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
</select>
</section>
</li>
</ul>
<input type="button" value="Add to Cart" onclick="addToCart()">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>
</script><script src='https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.min.js'></script>
<script >
$('#options').ddslick();
</script>
<script>
function addToCart(){
var school = document.getElementById('list1').value
var item = document.getElementById('list2').value
alert('school: '+school+' item: '+item)
}
</script>

You will have to assign a different id to each instance.
$('#options').ddslick();
$('#options2').ddslick();
<style class="cp-pen-styles">*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid__spans-25 {
width: 100%;
padding: 1em;
}
#media screen and (min-width: 48em) {
.grid__spans-25 {
width: 25%;
}
}
#options,
.dd-select,
.dd-options {
width: 100% !important;
}
.dd-selected-text,
.dd-option-text {
line-height: 64px !important;
}
.dd-select {
background: #fff !important;
border-color: #d1d3d4 !important;
border-radius: 0 !important;
}
.dd-selected {
font-weight: normal !important;
}
label {
display: block;
}
input[type="text"], input[type="name"], input[type="email"], input[type="tel"], input[type="password"], select {
background: transparent;
width: 100%;
height: 42px;
padding: 10px;
display: block;
border: 1px solid #d1d3d4;
border-radius: 0;
outline: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
<section class="grid">
<div>
<label for="options">Label</label>
<select id="options" class="test">
<option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
<option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
<option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
<option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
<option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
</select>
</div>
</section>
<section>
<div class="grid__spans-25">
<label for="options2">Label</label>
<select id="options2" class="test">
<option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
<option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
<option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
<option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
<option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
</select>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>
</script><script src='https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.min.js'></script>

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
}```

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>

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>

jQuery Form validation color change?

2 questions. i am learning form validation in javascript/jQuery
1) as you can see when there is not input , background color is pink, but when i start typing the background color is not going away. i tried with else if 'remove class' still no good. i want to achieve this using jQuery only
2)(html)when i click sign-up , I want document page to go to a different html page. how do i achieve this?
$(document).ready(function(){
if($("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").val(null)){
$("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").addClass("bordercoloron");
}
});
#wraper {
margin: 0 auto;
height: 4000px;
width: 1000px;
border: 2px solid black;
}
#wholeform {
margin: 0 auto;
height: 600px;
width: 400px;
border: 2px solid grey;
}
#fnameid, #Lnameid {
height: 50px;
width: 172px;
border: none;
position: relative;
left: 0.5%;
margin-top: 3%;
padding-left: 5%;
font-size: 20px;
}
#emailid, #phoneid {
height: 50px;
width: 372px;
border: none;
position: relative;
left: 0.5%;
font-size: 20px;
padding-left: 5%;
letter-spacing: 9px;
margin-top: 5%;
}
#dob-day, #dob-month, #dob-year {
height: 50px;
width: 120px;
position: relative;
left: 4%;
border: none;
font-size: 20px;
margin-top: 5%;
color: darkgray
}
#mf {
height: 55px;
width: 350px;
position: relative;
left: 4%;
border: none;
font-size: 50px;
margin-top: -2%;
padding-left: 5%;
letter-spacing: 10px;
color: darkgray
}
.bordercoloron {
background-color: coral;
}
.bordercoloroff {
border: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/jexercise.css">
</head>
<body>
<div id="wrap">
<div id="mainbox">
<form id="wholeform">
<input type="text" placeholder="FirstName" name="fname" id="fnameid">
<input type="text" placeholder="LastName" name="Lname" id="Lnameid">
<input type="text" placeholder="Email#example.com" name="email" id="emailid">
<input type="text" placeholder="Mobile Phone Number" name="fname" id="phoneid">
<select name="dob-day" id="dob-day">
<option value="">Day</option>
<option value="">---</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="dob-month" id="dob-month">
<option value="">Month</option>
<option value="">-----</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dob-year" id="dob-year">
<option value="">Year</option>
<option value="">----</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
</select>
<h3 style="font-size:20px; position: relative; left:5%; width:70px;color:darkgray;">Gender:</h3>
<select id="mf">
<option>Male</option>
<option>Female</option>
</select>
<input type="button" id="submit" style="background-color:#2196F3;border-radius:5px;border:2px #2196F3;position:relative; margin-top:25%;left:25%;width:200px;height:80px;font-size:50px;color:darkgray; padding-left:5%;" value="SignUp">
</form>
</div>
</div>
<script src="../js/jexercise.js"></script>
</body>
</html>

Answer 1 : If removeClass is not working properly, use removeAttr i.e.,
$("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").removeAttr("class");
Answer 2 : Add function on button click as below :
<input type="button" id="submit" onClick="myFunc()" value="SignUp">
Now declare function in your javascript i.e., :
var myFunc = function(){
window.location.href = 'Redirection Link';
}

Want to add drop down with checkbox for all items(i.e. multi-selector drop down)

In the above picture,there has a drop down for "Type of learning material:". I want to add a multi-selector drop down[drop down with a checkbox for all items] for the "Type of learning material:" Can anyone help me?
My code snippets are ->
form#form1 #s00{
padding: 5px 25px 5px 5px;
width: 300px;
border: 1px solid rgba(0,0,0,0.2);
}
form#form1 #srchMore{
margin-left:-27px;
cursor:pointer;
color:#ccc;
}
form#form1 #srchMore:hover{color:#0ac;}
form#form1 .srchMoreAct{color:#333;}
form#form1 #srchMoreOpt{
width: 350px;
padding: 10px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(0, 0, 0, 0.2);
z-index: 9999;
position: absolute;
background-color: white;
top: 150px;
left: 600px;
}
form#form1 .hid{
display:none;
}
form#form1 #srchMoreOpt .exi{float:right; padding:0px 4px; font-family:'Arial'; cursor:pointer; background:#ccc; color:#666;}
form#form1 #srchMoreOpt .exi:hover{background:#0ac; color:#fff;}
#aspect_discovery_SimpleSearch_field_filtertype_1{
display: hidden;
}
form#form1 #srchMoreOpt > div{
padding:5px;
}
<div id="srchMoreOpt" class="hid">
<span class="exi" onClick="srchMoreActive(false)">x</span>
<!--Author-->
<div>
<input type="hidden" name="filtertype_1" value="author" />
<input type="hidden" name="filter_relational_operator_1" value="contains" />
<label> Author: </label>
<input name="filter_1" type="text" /> <br></br>
</div>
<!--Author-->
<!--Type of Learning Material-->
<div>
<input type="hidden" name="filtertype_2" value="typeoflm" />
<input type="hidden" name="filter_relational_operator_2" value="equals" />
<label> Type of Learning Material: </label>
<select id="aspect_discovery_SimpleSearch_field_filtertype_2" class="ds-select-field" name="filter_2">
<option value="" selected="selected"> … </option>
<option value="book" xmlns="http://di.tamu.edu/DRI/1.0/"> Book </option>
<option value="videoLecture" xmlns="http://di.tamu.edu/DRI/1.0/"> Video Lecture </option>
<option value="audioLecture" xmlns="http://di.tamu.edu/DRI/1.0/"> Audio Lecture </option>
<option value="exercise" xmlns="http://di.tamu.edu/DRI/1.0/"> Exercise </option>
<option value="solution" xmlns="http://di.tamu.edu/DRI/1.0/"> Solution </option>
<option value="quiz" xmlns="http://di.tamu.edu/DRI/1.0/"> Quiz </option>
<option value="animation" xmlns="http://di.tamu.edu/DRI/1.0/"> Animation </option>
<option value="simulation" xmlns="http://di.tamu.edu/DRI/1.0/"> Simulation </option>
<option value="classNotes" xmlns="http://di.tamu.edu/DRI/1.0/"> Class Notes </option>
<option value="dataset" xmlns="http://di.tamu.edu/DRI/1.0/"> DataSet </option>
<option value="experiment" xmlns="http://di.tamu.edu/DRI/1.0/"> Experiment </option>
<option value="selfassesment" xmlns="http://di.tamu.edu/DRI/1.0/"> Self Assessment </option>
</select>
</div>
<!--Type of Learning Material-->
<!--Difficulty Level-->
<div>
<input type="hidden" name="filtertype_3" value="difficultylevel" />
<input type="hidden" name="filter_relational_operator_3" value="equals" />
<label> Difficulty Level: </label>
<select id="aspect_discovery_SimpleSearch_field_filtertype_3" class="ds-select-field" name="filter_3">
<option value="" selected="selected"> … </option>
<option value="default" xmlns="http://di.tamu.edu/DRI/1.0/"> Default </option>
<option value="very easy" xmlns="http://di.tamu.edu/DRI/1.0/"> Very Easy </option>
<option value="easy" xmlns="http://di.tamu.edu/DRI/1.0/"> Easy </option>
<option value="medium" xmlns="http://di.tamu.edu/DRI/1.0/"> Medium </option>
<option value="difficult" xmlns="http://di.tamu.edu/DRI/1.0/"> Difficult </option>
<option value="very difficult" xmlns="http://di.tamu.edu/DRI/1.0/"> Very Difficult </option>
</select> <br></br>
</div>
<!--Difficulty Level-->
<!--Education Level-->
<div>
<input type="hidden" name="filtertype_4" value="educationlevel" />
<input type="hidden" name="filter_relational_operator_4" value="equals" />
<label> Education Level: </label>
<select id="aspect_discovery_SimpleSearch_field_filtertype_4" class="ds-select-field" name="filter_4">
<option value="" selected="selected"> … </option>
<option value="preschool" xmlns="http://di.tamu.edu/DRI/1.0/"> Pre-School </option>
<option value="class1" xmlns="http://di.tamu.edu/DRI/1.0/"> Class I </option>
<option value="class2" xmlns="http://di.tamu.edu/DRI/1.0/"> Class II </option>
<option value="class3" xmlns="http://di.tamu.edu/DRI/1.0/"> Class III </option>
<option value="class4" xmlns="http://di.tamu.edu/DRI/1.0/"> Class IV </option>
<option value="class5" xmlns="http://di.tamu.edu/DRI/1.0/"> Class V </option>
<option value="class6" xmlns="http://di.tamu.edu/DRI/1.0/"> Class VI </option>
<option value="class7" xmlns="http://di.tamu.edu/DRI/1.0/"> Class VII </option>
<option value="class8" xmlns="http://di.tamu.edu/DRI/1.0/"> Class VIII </option>
<option value="class9" xmlns="http://di.tamu.edu/DRI/1.0/"> Class IX </option>
<option value="class10" xmlns="http://di.tamu.edu/DRI/1.0/"> Class X </option>
<option value="class11" xmlns="http://di.tamu.edu/DRI/1.0/"> Class XI </option>
<option value="class12" xmlns="http://di.tamu.edu/DRI/1.0/"> Class XII </option>
<option value="UG" xmlns="http://di.tamu.edu/DRI/1.0/"> Under Graduate </option>
<option value="PG" xmlns="http://di.tamu.edu/DRI/1.0/"> Post Graduate </option>
<option value="Doctoral" xmlns="http://di.tamu.edu/DRI/1.0/"> Doctoral </option>
</select>
</div>
<!--Education Level-->
<br></br>
<div>
<input id="aspect_discovery_SimpleSearch_field_submit_apply_filter" class="ds-button-field discovery-apply-filter-button" type="submit" value="Apply" name="submit_apply_filter"></input>
</div>
</div>

If you using custom raw JS pop up then it's very difficult when overlaps of layers are appeared. I suggest some simple codes to make out of it. See http://jsfiddle.net/uxs1oc4b/ or bellow:
function actDdrp(e){
e=document.getElementById(e.parentNode.getAttribute('id'));
if(e.style.height!='auto') e.style.height="auto";
else e.style.height='32px';
}
.ddrp {border:1px solid #ccc; width:250px; height:32px; overflow:hidden; margin-bottom:10px;}
.ddrp p{margin:0; padding:7px;}
.ddrp p:first-child{cursor:pointer; -webkit-user-select:none; -moz-user-select:none; user-select:none;}
.ddrp p:first-child span{float:right; color:#999;}
<div class="ddrp" id="ddrp_1">
<p onClick="actDdrp(this)">Types <span>▼</span></p>
<p><input type="checkbox" name="audio" /> Audio</p>
<p><input type="checkbox" name="video" /> Video</p>
</div>
<div class="ddrp" id="ddrp_2">
<p onClick="actDdrp(this)">Category <span>▼</span></p>
<p><input type="checkbox" name="cat1" /> Cat 1</p>
<p><input type="checkbox" name="cat2" /> Cat 2</p>
<p><input type="checkbox" name="cat3" /> Cat 3</p>
</div>

use the jquery MultiSelect Widget
Demo here:
http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/
possible duplicate of:
How to use Checkbox inside Select Option

Yes you definitely can! Use the below code snippet for reference.
var checkList = document.getElementById('list1');
var items = document.getElementById('items');
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
if (items.classList.contains('visible')){
items.classList.remove('visible');
items.style.display = "none";
}
else{
items.classList.add('visible');
items.style.display = "block";
}
}
items.onblur = function(evt) {
items.classList.remove('visible');
}
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
<body>
<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor">Select Fruits</span>
<ul id="items" class="items">
<li><input type="checkbox" />Apple </li>
<li><input type="checkbox" />Orange</li>
<li><input type="checkbox" />Grapes </li>
<li><input type="checkbox" />Berry </li>
<li><input type="checkbox" />Mango </li>
<li><input type="checkbox" />Banana </li>
<li><input type="checkbox" />Tomato</li>
</ul>
</div>
</body>

We Keep Coding

JavaScript is the programming language of the Web.

Image-dropdown with callback function - 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

iframe doesn't show its content

datalist vertical scroll not working in chrome

jQuery Form validation color change?

Want to add drop down with checkbox for all items(i.e. multi-selector drop down)

Categories

Resources