How make to make dropdown without html select

How make to make dropdown without html select - javascript

I used the following html to make a dropdown:
<div class="container">
<select id="search-pax" name="pax" class="ls-select ">
<p>Start the selection</p>
<option value="1">1 gas <span>1700</span></option>
<option value="2">2 gaste</option>
<option value="3">3 gaste</option>
<option value="4">4 gaste</option>
<option value="5">5 gaste</option>
<option value="6">6 gaste</option>
<option value="7">7 gaste</option>
<option value="8">8 gaste</option>
<option value="9">9 gaste</option>
<option value="10">10 gaste</option>
<option value="11">11 gaste</option>
<option value="12">12 gaste</option>
<option value="13">13 gaste</option>
<option value="14">14 gaste</option>
<option value="15">15 gaste</option>
<option value="16">16 gaste</option>
<option value="17">17 gaste</option>
<option value="18">18 gaste</option>
<option value="19">19 gaste</option>
<option value="20">20 gaste</option>
</select>
</div>
So, as you can see here in the html and the running snippet, I tried to add paragraph tag inside the select tag, tried styling the option and nothing works.
The objective is to achieve something like the photo, where I select an item,the item would go to the input field.
Hope you can help.

I suggest you use optgroup to set your desired element/header. <p> is not a valid element under <select>.
<div class="container">
<select id="search-pax" name="pax" class="ls-select ">
<optgroup label="Start the selection">
<option value="1">1 gas <span>1700</span></option>
<option value="2">2 gaste</option>
<option value="3">3 gaste</option>
<option value="4">4 gaste</option>
<option value="5">5 gaste</option>
<option value="6">6 gaste</option>
<option value="7">7 gaste</option>
<option value="8">8 gaste</option>
<option value="9">9 gaste</option>
<option value="10">10 gaste</option>
<option value="11">11 gaste</option>
<option value="12">12 gaste</option>
<option value="13">13 gaste</option>
<option value="14">14 gaste</option>
<option value="15">15 gaste</option>
<option value="16">16 gaste</option>
<option value="17">17 gaste</option>
<option value="18">18 gaste</option>
<option value="19">19 gaste</option>
<option value="20">20 gaste</option>
</optgroup>
</select>
</div>

USE <ul> <li>
Hi,
If you want add any HTML tags inside your item list. Best way is use <ul> <li> with combination of css and some Jquery tricks to display as Dropdown
Try below sample code
$("ul").on("click", ".init", function() {
$(this).closest("ul").children('li:not(.init)').toggle();
});
var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$("ul").children('.init').html($(this).html());
allOptions.toggle();
});
// Check this click evnet -
$("body").on("click", "#ddlDemoDropdown li", function() {
var selectedValue = $(this).attr('data-value')
alert(selectedValue)
});
body{
padding:30px;
}
ul {
height: 30px;
width: 150px;
border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }
a#submit { z-index: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id='ddlDemoDropdown' class="list-unstyled" style="list-style: none;">
<li class="init" data-value="-1">--SELECT--</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Here you can add any HTML tags like <input style='width:30px;' type='text' /> Textbox ... ;) </li>
<li data-value="value 3">Option 3</li>
</ul>
EDIT:-
Check below click event and I also updated my snippet .. you can check now
$("body").on("click", "#ddlDemoDropdown li", function() {
var selectedValue = $(this).attr('data-value')
alert(selectedValue)
});

Here is an example for a dropdown with the ul and li from the html code.
$(document).ready(function(){
$("#input").click(function(){
$("#selectives").css('display', 'block');
$("input").css('borderRadius', '2px 2px 0px 0px');
});
$(".auswahl").click(function(){
var das = $(this).html();
$("#input").val(das);
$("#selectives").css('display', 'none');
$("input").css('borderRadius', '2px');
});
});
p {margin: 0px; padding: 0px;}
body {height: 510px; font-family: Arial}
#selectives {height: 10px; position: absolute; top: 32px; left: -32px; display: none;}
#input {position: relative; }
input:hover {cursor: pointer; }
input::-moz-selection {background: white; color: #000}
input {width: 107px; border-radius: 2px; border: 0.1em solid black; -webkit-appearance: none; padding: 5px; font-size: 10px;}
ul {margin-top: 0px;list-style-type: none; text-align: left;}
li {width: 107px; border-color: black black orange black; border-style: solid; border-width: 1px; padding: 5px; border-radius: 0px; font-size: 10px; border-top: 0px;}
li:last-child {border-radius: 0px 0px 2px 2px; border: 1px solid black; border-top: 0px;}
li:first-child {border-radius: 0px; border-bottom: 1px solid orange; border-top: 0px;}
li:hover {background-color: ghostwhite; cursor: pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input readonly id="input" type="text" value="Dropdown">
<div id="selectives">
<ul>
<li class="auswahl">Hello</li>
<li class="auswahl">This</li>
<li class="auswahl">Is</li>
<li class="auswahl">An</li>
<li class="auswahl">Example</li>
</ul>
</div>

You can use a textbox and a div that you will make visible on click. Inside the div you will have tabular data. It's how many of the ui date inputs are made. Or try to use a framework like jquery, bootstrap, etc ...
This does need a bit of css styling though.

Instead of using select box use select2.
Please follow the examples and code here:
https://select2.github.io/examples.html
This will help to achieve you want.
THanks

you can use and customise this plugin. this plugin will help to give searching functionality and many more features.
how it works
behind the seen there will be a select html and plugin will convert this into the custom html which you can further modify and implement styles according to your taste
https://harvesthq.github.io/chosen/

Based on answer I achieved the desired as you seen in following snippet:
http://codepen.io/Sidney-Dev/pen/gWYNVe?editors=1111
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-unstyled" style="list-style: none;">
<li class="init">--SELECT--</li>
<li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li>
<li data-value="value 3"><span class="value">Durban</span><span class="numbers">1400</span></li>
<li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li>
</ul>
CSS:
body{
padding:30px;
}
ul {
height: 30px;
width: 150px;
border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }
a#submit { z-index: 1; }
li{
display: flex;
justify-content: space-between;
}
li, ul{
padding: 0;
margin: 0;
}
JS:
$("ul").on("click", ".init", function() {
$(this).closest("ul").children('li:not(.init)').toggle();
});
var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$("ul").children('.init').html($(this).html());
allOptions.toggle();
console.log($('.selected .value').text());
});

Related

Dropdown Button is not working, what is missing?

I recently created the Dropdown which lists a number of states, and every option points to a different page. The button is not functional, it selects the elements, and won't redirect me to a the page I selected.
Every time I click the button, nothing happens.
How can I make this work?
<head>
<style>
.state-drop
{
height: auto;
display: inline-block;
width: auto;
padding:1px 35px;
background-image:linear-gradient(to right, #044A04, #00B300) ;
border-radius: 50px;
}
.state-drop select
{
background-color: transparent;
color:#fff;
border:none;
outline: none;
font-size: 20px;
min-height: 48px;
padding:0px 25px 0px 0px;
}
.state-drop select option:disabled
{
background-color:#ddd;
color:#999;
}
.state-drop select option{
color:#525252;
}
</style>
</head>
<body>
<div class="state-drop">
<select name="states" class="state-select">
<option selected="">Select Your State</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-arkansas/">Arkansas</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-california/">California</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-florida/">Florida</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-georgia/">Georgia</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-hawaii/">Hawaii</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-illinois/">Illinois</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-maryland/">Maryland</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-minnesota/">Minnesota</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-missouri/">Missouri</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-michigan/">Michigan</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-nevada/">Nevada</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-new-jersey/">New Jersey</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-new-york/">New York</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-ohio/">Ohio</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-oklahoma/">Oklahoma</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-puerto-rico/">Puerto Rico</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-pennsylvania/">Pennsylvania</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-virginia/">Virginia</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-washington-dc/">Washington DC</option>
</select>
</body>

It seems that you are trying to go to next page just on selecting the value from the dropdown.
To get the above scenario working you can use the onchange event to redirect to the new url.
just add
<select name="states" class="state-select" onchange="location = this.value;">
Demo: https://jsfiddle.net/a26jkhns/3/

i want to get the currency by using option value

const currencyone = document.querySelector(".currency-one");
const currenciesone = currencyone.querySelectorAll("option");
const currencytwo = document.querySelector(".currency-two");
const currenciestwo = currencytwo.querySelectorAll("option");
const button = document.querySelector("button");
const amountone = document.querySelector("#amount-one");
button.addEventListener("click", get);
async function get() {
var response = await fetch(
`https://v6.exchangerate-api.com/v6/c1840f1544632103eddeafff/latest/USD`
);
const data = await response.json();
console.log(data);
for (i = 0; i < currenciesone.length; i++) {
if (currenciesone[i].selected) {
let value = currenciesone[i].value;
console.log(data.conversion_rates.value);
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 20px;
}
h1 {
color: rgb(29, 187, 127);
margin-bottom: 38px;
}
p {
text-align: center;
}
.btn {
color: #fff;
background: rgb(29, 187, 127);
cursor: pointer;
border-radius: 5px;
font-size: 12px;
padding: 5px 12px;
outline: none;
}
.money-img {
width: 150px;
margin-bottom: 38px;
}
.currency {
padding: 40px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.currency select {
padding: 10px 20px 10px 10px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: 1px solid #dedede;
font-size: 16px;
background: transparent;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%20000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-position: right 10px top 50%, 0, 0;
background-size: 12px auto, 100%;
background-repeat: no-repeat;
}
.currency input {
border: 0;
background: transparent;
font-size: 30px;
text-align: right;
}
.swap-rate-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.rate {
color: rgb(29, 187, 127);
font-size: 14px;
padding: 0 10px;
}
select:focus,
input:focus,
button:focus {
outline: 0;
}
#media (max-width: 600px) {
.currency input {
width: 200px;
}
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<img src="money.png" alt="" class="money-img" />
<h1>Exchange Rate Calculator</h1>
<p>Choose the currency and the amounts to get the exchange rate</p>
<div class="container">
<div class="currency">
<select class="currency-one">
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR">INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="USD" selected>USD</option>
<option value="UYU">UYU</option>
<option value="VND">VND</option>
<option value="ZAR">ZAR</option>
</select>
<input type="number" id="amount-one" placeholder="0" value="1" />
</div>
<div class="swap-rate-container">
<button class="btn" id="swap">
Swap
</button>
<div class="rate" id="rate"></div>
</div>
<div class="currency">
<select class="currency-two">
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR" selected>EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR">INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="UYU">UYU</option>
<option value="VND">VND</option>
<option value="ZAR">ZAR</option>
</select>
<input type="number" id="amount-two" placeholder="0" />
</div>
</div>
<script src="app.js"></script>
</body>
</html>

hello i want to get the currency price by using option select value of json data but that didn't work ( i have to get the price of currency name when i select it there is data.conversion_rates on that is 52 currency i want to get the currency price when i select a currency option so i chose data.conversion_rates.value the value is a string of currency

How to always show the first option as selected in HTML Select?

I've an HTML select where I want to achieve something when I select any option from the select menu it should not show those selected option into the box instead it has to show the first option always regardless of whatever user chose from the option inside.
Here is my CSS code for the div and Select:
.styled select {
background: transparent;
width: 140px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
.styled {
width: 40px;
height: 34px;
border: 1px solid #46b8da;
border-radius: 3px;
overflow: hidden;
background-color: #5bc0de;
}
<div class="styled">
<select id="drpInsertMerge" onchange="drpChanged(this);">
<option selected>{}</option>
<option value="Phone Number">Phone Number</option>
<option value="Email Address">Email Address</option>
<option value="Given Name">Given Name</option>
<option value="Family Name">Family Name</option>
<option value="Display Name">Display Name</option>
</select>
</div>
Here, from the above code you can see that the dropdown box or the div is actually smaller than the select menu (which is required in my case) which matches with the first option {} but if I chose any other option from the below then most of the text is getting cut which is not good looking that's why I need your help or suggestion to know how to achieve this. Thanks.

Thanks everyone for taking time to read my question and for your valuable suggestion. But here I've found a solution to my problem. Now, I'm using a javascript function which will make the selectedIndex = 0 after each selection made.
here is the code:
function drpChanged(ddl) {
var drpInsertMerge = document.getElementById("drpInsertMerge");
var selectedText = drpInsertMerge.options[drpInsertMerge.selectedIndex].innerHTML;
var selectedValue = drpInsertMerge.value;
drpInsertMerge.selectedIndex = 0;
return false;
}
<select id="drpInsertMerge" onchange="drpChanged(this);">
<option selected>{}</option>
<option value="Phone Number">Phone Number</option>
<option value="Email Address">Email Address</option>
<option value="Given Name">Given Name</option>
<option value="Family Name">Family Name</option>
<option value="Display Name">Display Name</option>
</select>
Thanks again everyone.

way that you are going to design is wrong.This might be a way to increase the width of your styled class in css.
.styled select {
background: transparent;
width: 500px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
.styled {
width: 300px;
height: 34px;
border: 1px solid #46b8da;
border-radius: 3px;
overflow: hidden;
background-color: #5bc0de;
}
<div class="styled">
<select id="drpInsertMerge" onchange="drpChanged(this);">
<option selected>{}</option>
<option value="Phone Number">Phone Number</option>
<option value="Email Address">Email Address</option>
<option value="Given Name">Given Name</option>
<option value="Family Name">Family Name</option>
<option value="Display Name">Display Name</option>
</select>

How to change select menu background color after selected any option| not option color

i have select option list in my side panel and i just want to change select background color if the user selected any option. I don't want to change option colors. Simply i want to make as if user select any option, apply mouse hover color to background.
to
.nav-country-select:hover {
border: 1px solid #999;
background-color: #ced0cf;
}
.nav-country-select:focus {
outline: none !important;
}
.nav-country-select {
background-color: #e9ece5;
font-family: Arial, Times, serif;
color: #333333;
height: 35px;
border: 1px solid #bbbcbc;
}
<li>
<label class="label nav-label">Country</label>
<select class="btn nav-country-select" id="countrySelect" autocomplete="off">
<option value="1" selected>Doesn't Matter</option>
<option value="3">Australia</option>
<option value="4">New Zealand</option>
<option value="5">Middle East</option>
<option value="6">UK</option>
<option value="7">USA</option>
<option value="8">Canada</option>
<option value="9">India</option>
<option value="10">Other</option>
</select>
</li>

If js is allowed, try this.
$('#countrySelect').change(function() {
if ($(this).val()) $(this).css('background', 'red');
else $(this).css('background', '#e9ece5');
})
.nav-country-select:hover {
border: 1px solid #999;
background-color: #ced0cf;
}
.nav-country-select:focus {
outline: none !important;
}
.nav-country-select {
background-color: #e9ece5;
font-family: Arial, Times, serif;
color: #333333;
height: 35px;
border: 1px solid #bbbcbc;
}
.nav-country-select option{
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<li>
<label class="label nav-label">Country</label>
<select class="btn nav-country-select" id="countrySelect" autocomplete="off">
<option value="" selected>Doesn't Matter</option>
<option value="3">Australia</option>
<option value="4">New Zealand</option>
<option value="5">Middle East</option>
<option value="6">UK</option>
<option value="7">USA</option>
<option value="8">Canada</option>
<option value="9">India</option>
<option value="10">Other</option>
</select>
</li>

Add onchange to the select;
.nav-country-select:hover {
border: 1px solid #999;
background-color: #ced0cf;
}
.nav-country-select:focus {
outline: none !important;
}
.nav-country-select {
background-color: #e9ece5;
font-family: Arial, Times, serif;
color: #333333;
height: 35px;
border: 1px solid #bbbcbc;
}
<li>
<label class="label nav-label">Country</label>
<select class="btn nav-country-select" id="countrySelect" onchange="this.style.background = 'gray'" autocomplete="off">
<option value="1" selected>Doesn't Matter</option>
<option value="3">Australia</option>
<option value="4">New Zealand</option>
<option value="5">Middle East</option>
<option value="6">UK</option>
<option value="7">USA</option>
<option value="8">Canada</option>
<option value="9">India</option>
<option value="10">Other</option>
</select>
</li>

Use Jquery.
$("#countrySelect").change(function()
{
$(".nav-country-select").css("background-color","#2b67c6");
});
.nav-country-select {
background-color: #e9ece5;
font-family: Arial, Times, serif;
color: #333333;
height: 35px;
border: 1px solid #bbbcbc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<label class="label nav-label">Country</label>
<select class="btn nav-country-select" id="countrySelect" autocomplete="off">
<option value="1" selected>Doesn't Matter</option>
<option value="3">Australia</option>
<option value="4">New Zealand</option>
<option value="5">Middle East</option>
<option value="6">UK</option>
<option value="7">USA</option>
<option value="8">Canada</option>
<option value="9">India</option>
<option value="10">Other</option>
</select>
</li>

$('#countrySelect').change(function() {
if ($(this).val()) $(this).css('background', 'red');
else $(this).css('background', '#e9ece5');
})
.nav-country-select:hover {
border: 1px solid #999;
background-color: #ced0cf;
}
.nav-country-select:focus {
outline: none !important;
}
.nav-country-select {
background-color: #e9ece5;
font-family: Arial, Times, serif;
color: #333333;
height: 35px;
border: 1px solid #bbbcbc;
}
.nav-country-select option{
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<li>
<label class="label nav-label">Country</label>
<select class="btn nav-country-select" id="countrySelect" autocomplete="off">
<option value="" selected>Doesn't Matter</option>
<option value="3">Australia</option>
<option value="4">New Zealand</option>
<option value="5">Middle East</option>
<option value="6">UK</option>
<option value="7">USA</option>
<option value="8">Canada</option>
<option value="9">India</option>
<option value="10">Other</option>
</select>
</li>

You can just add a different background color to option elements so everytime it looks like if some option is selected , select element will have a different color
select>option{
background-color: #ced0cf;
}

Reducing Opacity of Parent When Checkbox is Checked

I am trying to reduce the opacity of a table (with class="test") whenever a checkbox that is within the table is checked. For some reason, only the checkbox itself fades. I don't understand what I'm doing wrong. My code is below. Thanks for the help.
table.test input[name="delete_record[]"]:checked {
opacity: 0.5;
}
<table class="test" cellpadding="10" cellspacing="0" align="center" bgcolor="#9CDEEC" border="0" style="margin-bottom: 16px;border-radius: 4px;border: 1px solid #555555;">
<!-- Transactions table -->
<tbody>
<tr>
<td>
<input style="width: 90px;" type="text" class="datepicker" name="date[]" required="" value="01/09/1970">
</td>
<td>
<input type="text" name="payee[]" required="" value="Hateful!">
</td>
<td rowspan="2" align="left" valign="top">
<a title="Memo: They're customer service is astounding.">
<textarea rows="3" style="text-align: left; border: 1px solid #AAAAAA; width: 200px; background-color: #FFFFFF; padding: 3px;" name="memo[]">They're customer service is astounding.</textarea>
</a>
</td>
<td>
<select name="reconciled[]">
<option value="R" selected="selected">R</option>
<option value=""></option>
<option value="C">C</option>
<option value="R">R</option>
</select>
</td>
<td>
<input style="width: 100px; text-align: right;" type="number" step="0.01" name="deposit[]" size="4" min="0" max="100000000" value="">
</td>
<td>
<input style="width: 100px; text-align: right;" type="number" step="0.01" name="withdrawal[]" size="4" min="0" max="100000000" value="37.00">
</td>
<input type="hidden" name="record_id[]" value="95">
<td rowspan="2" align="center" valign="middle">
<input type="checkbox" name="delete_record[]" value="95">
</td>
</tr>
<tr>
<td>
<input style="width: 60px;" placeholder="Check #" type="number" step="1" min="0" max="1000000000" name="check_number[]" value="110">
</td>
<td>
<select name="category[]" style="width: 200px;">
<option value="1" selected="selected">Business: Advertising</option>
<option value="42">Business</option>
<option value="1">Business: Advertising</option>
<option value="2">Business: Assets</option>
<option value="24">Business: Automotive: Auto Insurance</option>
<option value="25">Business: Automotive: Auto Loan</option>
<option value="26">Business: Automotive: Repairs</option>
<option value="27">Business: Automotive: Fuel</option>
<option value="28">Business: Automotive: Parking and Tolls</option>
<option value="29">Business: Automotive: Registration</option>
<option value="30">Business: Automotive: Vehicle Leasing</option>
<option value="31">Business: Automotive: Wash and Road Services</option>
<option value="3">Business: Commissions and Fees</option>
<option value="4">Business: Contract Labor</option>
<option value="23">Business: H.S.A. Contrbutions</option>
<option value="22">Business: Health Insurance Premiums</option>
<option value="10">Business: Home Office Other Expenses</option>
<option value="12">Business: Home Office Rent and Lease</option>
<option value="37">Business: Home Office Repairs and Maintenence</option>
<option value="5">Business: Insurance</option>
<option value="32">Business: Interest Paid: Business Loan</option>
<option value="33">Business: Interest Paid: Business Mortgage</option>
<option value="34">Business: Interest Paid: Credit Card</option>
<option value="35">Business: Interest Paid: Home Office Mortgage</option>
<option value="6">Business: Legal and Professional Services</option>
<option value="7">Business: Materials and Supplies</option>
<option value="8">Business: Meals and Entertainment</option>
<option value="9">Business: Office Expenses</option>
<option value="11">Business: Rent and Lease</option>
<option value="36">Business: Repairs and Maintenence</option>
<option value="13">Business: Taxes and Licenses: Licenses</option>
<option value="14">Business: Taxes and Licenses: Property Tax</option>
<option value="15">Business: Taxes and Licenses: Estimated Taxes</option>
<option value="16">Business: Taxes and Licenses: Federal Tax</option>
<option value="17">Business: Taxes and Licenses: Home Office Property Tax</option>
<option value="18">Business: Taxes and Licenses: State Tax</option>
<option value="19">Business: Travel</option>
<option value="20">Business: Utilities: Utilities</option>
<option value="21">Business: Utilities: Home Office Utilities</option>
<option value="43">Personal</option>
<option value="51">Personal: Automotive</option>
<option value="52">Personal: Charity and Donations</option>
<option value="53">Personal: Child Care</option>
<option value="54">Personal: Clothing</option>
<option value="55">Personal: Education</option>
<option value="56">Personal: Entertainment</option>
<option value="48">Personal: Furnishings</option>
<option value="63">Personal: Gift</option>
<option value="44">Personal: Groceries</option>
<option value="47">Personal: Health and Fitness</option>
<option value="57">Personal: Home Maintenance and Repairs</option>
<option value="50">Personal: Insurance</option>
<option value="58">Personal: Medical</option>
<option value="59">Personal: Mortgage</option>
<option value="49">Personal: Pets</option>
<option value="60">Personal: Property Tax</option>
<option value="61">Personal: Rent</option>
<option value="46">Personal: Resturants</option>
<option value="62">Personal: Travel and Vacation</option>
<option value="45">Personal: Utilities</option>
<option value="38">Transfer: Bank to Bank</option>
<option value="39">Transfer: Credit Card Payment</option>
<option value="40">Transfer: Owner's Deposit</option>
<option value="41">Transfer: Owner's Withdrawal</option>
</select>
</td>
<td colspan="3" align="right" valign="middle" style="padding-right: 20px;">
<!-- Accounts Selector -->
<select name="bank_account[]">
<option value="19">Chroot Checking</option>
<option value="10">Main Checking</option>
<option value="19">Chroot Checking</option>
</select>
</td>
</tr>
</tbody>
</table>

As you can't change the parent's opacity using CSS, you would need to use JavaScript.
document.querySelector('input[name="delete_record[]').addEventListener('click', function() {
var d = document.querySelector('table.test');
if(this.checked) {
d.style.opacity = 0.5;
} else {
d.style.opacity = 1;
}
});
This toggles the opacity as well.
Example here.
To only affect the parent table, and using a class to toggle as suggested by #abluejelly, you could do:
document.querySelector('input[name="delete_record[]').addEventListener('click', function() {
var d = this.parentNode.parentNode.parentNode; // the table
d.classList.toggle('halfOpacity', this.checked);
});
You would need a CSS class:
.halfOpacity {
opacity: 0.5;
}
for that to work.
Example here.
If you have multiple tables though you would need to try something like:
var tables = document.querySelectorAll('input[name="delete_record[]');
for(var i = 0, l = tables.length; i < l; i++) {
tables[i].addEventListener('click', function() {
var d = this.parentNode.parentNode.parentNode; // the table
d.classList.toggle('halfOpacity', this.checked);
});
}
which loops through all your tables and assigns the click event listener to the checkboxes.
Example here.

This will reduce the table opacity whenever a checkbox that is within the table is checked.
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var table = document.querySelector('table.test');
var oneIsChecked = false;
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].addEventListener("click", function(e) {
oneIsChecked = false;
for(var j=0; j<checkboxes.length; j++){
if(checkboxes[j].checked) {
oneIsChecked = true;
break;
}
}
if(oneIsChecked){
table.style.opacity = 0.5;
}else{
table.style.opacity = 1;
}
});
}

table.test input[name="delete_record[]"]:checked
This selector says: match a checked input element with its name attribute set to "delete_record[]", that is a descendant of a table element with class test. Put simply, this CSS selector refers to your input element, not your table element (which is one of its parents instead).
For a pure CSS-based solution you would need a "has-descendant" or "has-child" operator, which is unfortunately not supported in CSS3. You will therefore need to resort to JavaScript and watch for when your input changes, then progammatically set opacity (or whatever you need):
document.querySelector('input[name="delete_record[]"]')[0].addEventListener('change', function () {
var tableElement = document.querySelector('table.test')[0];
if (this.checked) {
tableElement.style.opacity = 0.5;
} else {
tableElement.style.opacity = 1;
}
});
You will of course also need to match the initial table opacity to the initial checked state of your input.
Note however, that opacity is effectively inherited from a visual perspective.

Your checkbox is only fading because that is what your CSS selector is targeting.
Unfortunately, CSS cannot do what you're asking. You can only target elements that are preceded by others, not followed by.
You can use other methods to conditionally apply a class to your table and style it accordingly. jQuery is a simple solution, but the best option depends on what languages you're using.

You can do it simply using CSS as well, follow the below instructions:
step #1: copy and paste the below code in a separate file to see the result, then use it for your own purpose.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #001925;
}
.list {
padding: 30px 75px 10px 30px;
position: relative;
background: #042b3e;
border-top: 50px solid #03a9f4;
}
.list h2 {
color: #fff;
font-size: 30px;
padding: 10px 0;
margin-left: 10px;
display: inline-block;
border-bottom: 4px solid #fff;
}
.list label {
position: relative;
display: block;
margin: 40px 0;
color: #fff;
font-size: 24px;
cursor: pointer;
}
.list input[type="checkbox"] {
-webkit-appearance: none;
}
.list i {
position: absolute;
top: 0;
display: inline-block;
width: 25px;
height: 25px;
border: 2px solid #fff;
left: 0;
}
.list input[type="checkbox"]:checked ~ i {
top: 1px;
border-top: none;
border-right: none;
height: 15px;
width: 25px;
transform: rotate(-45deg);
}
.list span {
position: relative;
left: 40px;
transition: 0.5s;
}
.list span:before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transform: translateY(-50%) scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.list input[type="checkbox"]:checked ~ span:before {
transform: translateY(-50%) scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
.list input[type="checkbox"]:checked + span {
opacity: 0.2;
transform: translateY(-50%) scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
opacity: 0.2;
}
<DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Check List</title>
</head>
<body>
<div class="list">
<h2>Check list in HTML & CSS</h2>
<label>
<input type="checkbox" name="">
<span>HTML stand for Hyper text markup language</span>
<i></i>
</label>
</div>
</body>
</html>

In jQuery you can do something like
if ($('input[name="delete_record[]"]').is(':checked')) {
$('table.test').css('opacity', 0.5);
}

$('input[name="delete_record[]"]').click(function(){
$(this).is(':checked')) {
$('table.test').css('opacity', 0.5);
}
});

Develop Reference

JavaScript is the programming language of the Web.

How make to make dropdown without html select - javascript

You can use a textbox and a div that you will make visible on click. Inside the div you will have tabular data. It's how many of the ui date inputs are made. Or try to use a framework like jquery, bootstrap, etc ... This does need a bit of css styling though.

Instead of using select box use select2. Please follow the examples and code here: https://select2.github.io/examples.html This will help to achieve you want. THanks

Related

Dropdown Button is not working, what is missing?

i want to get the currency by using option value

How to always show the first option as selected in HTML Select?

How to change select menu background color after selected any option| not option color

Reducing Opacity of Parent When Checkbox is Checked

Categories

Resources