I have a site made with Symfony and there is a dropdown menu with class=multiselect-container dropdown-menu
It works well except when I try to narrow the window : when the "location block" goes under the drop down menu; the drop drop disappears and is not clikable:
https://drive.google.com/open?id=0B2bmESDsWIPoRWtROTREWnVMTmM
here is the code :
<!-- form-category -->
<form name="" method="get" action="/en/listing/search_result" class="form-category alt col-xs-12">
<fieldset>
<legend class="hidden">form-category</legend>
<div class="form-holder">
<div class="col categories">
<strong class="title">
<label for="categories">
Categories
</label>
</strong>
<div class="multiselect">
<select id="categories" name="categories[]" multiple="multiple">
<optgroup label="Kitesurf Rental">
</optgroup> <optgroup label="   Kite">
</optgroup> <option value="33">
      Bow kite
</option> <option value="34">
      Delta kite
</option> <option value="35" selected="selected">
      Hybrid kite
</option> <option value="45">
      C-KITE
</option> <optgroup label="   Board">
</optgroup> <option value="50">
      Wake-style Board Boots
</option> <option value="27">
      Surfboard
for kiteboarding
</option> <option value="47">
      Foil
Board
</option> <option value="48">
      Race
board
</option> <option value="49">
      Twin-tip
</option> <option value="51">
      Wakeskate
</option> <option value="52">
   Kitesurf accessories
</option> <option value="64">
   Buggy rental
</option> <optgroup label="Wetsuit /Drysuit">
</optgroup> <option value="32">
   Wetsuit
</option> <option value="37">
   Drysuit
</option> <optgroup label="Stand Up Paddle / Canoe
Kayak">
</optgroup> <option value="20">
   Inflatable
</option> <option value="28">
   Surf SUP
</option> <option value="29">
   Flatwater
</option> <option value="30">
   Flatwater
</option> <option value="31">
   Race SUP
</option> <option value="62">
   Kayak / Canoe
</option> <optgroup label="Surf">
</optgroup> <option value="44">
   Hybrid
</option> <option value="43">
   Gun
</option> <option value="42">
   Fish
</option> <option value="41">
   Longboard
</option> <option value="40">
   Funboard
</option> <option value="39">
   Shortboard
</option> <optgroup label="Diving">
</optgroup> <option value="57">
   Console Gauges
</option> <option value="56">
   Nitrox Computer
</option> <option value="55">
   Regulator
</option> <option value="54">
   Vest BCD
</option> <option value="58">
   Octopus or Alternate Air Source
</option> <option value="59">
   Air Tank
</option> <option value="60">
   Weight and/or Weight Belt
</option> <option value="61">
   Scuba accessories
</option> <option value="63">
MTB Mountainboard rental
</option></select>
</div>
</div>
<div class="col location">
<strong class="title">
<label for="location_address">
Place
</label>
</strong>
<div class="field-holder">
CSS
.multiselect-container {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0
}
.multiselect-container .input-group {
margin: 5px
}
.multiselect-container > li {
padding: 0
}
.multiselect-container > li > a.multiselect-all label {
font-weight: 700
}
.multiselect-container > li.multiselect-group label {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
font-weight: 700
}
.multiselect-container > li.multiselect-group-clickable label {
cursor: pointer
}
.multiselect-container > li > a {
padding: 0
}
.multiselect-container > li > a > label {
margin: 0;
height: 100%;
cursor: pointer;
font-weight: 400;
padding: 3px 20px 3px 40px
}
.multiselect-container > li > a > label.radio, .multiselect-container > li > a > label.checkbox {
margin: 0
}
.multiselect-container > li > a > label > input[type=checkbox] {
margin-bottom: 5px
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio {
padding: 3px 20px 3px 40px
}
.form-inline .multiselect-container li a label.checkbox input[type=checkbox], .form-inline .multiselect-container li a label.radio input[type=radio] {
margin-left: -20px;
margin-right: 0
}
If you have an idea what I could do ?
Thank you
The problem was That bootstrap was outdated, I just needed to change the link to the new bootstrap version https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
Related
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
}```
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>
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>
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';
}
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>