i want to get the currency by using option value - javascript

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

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/

How to get Text Form Output in the result

i have a code the drop downs are working fine... but i want the Text thats typed in the text box to output after the $s= in the results here is the code that is being used
http://jsfiddle.net/Webbytest/ygz32s0u/
$("#month, #color").change(function() {
var month = $("#month").val();
var color = $("#color").val();
var content = '';
if (month && color) {
var monthlabel = $("label[for=" + month + "]").text();
var colorlabel = $("label[for=" + color + "]").text();
content = ' ' + monthlabel + '' + colorlabel + '&s=';
}
$("#output").text(content).fadeIn();
});
body {
margin: 10px;
}
form {
margin: 0px auto;
width: 370px;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 13px/18px;
font-weight: 300;
padding: 10px 0px;
text-align: center;
}
.output {
color: #000;
font-family: 'Roboto', sans-serif;
font-size: 13px/20px;
font-style: normal;
font-weight: 100;
text-align: center;
}
h2 {
color: #009CDC;
font-family: 'Roboto', sans-serif;
font-size: 2.5em;
font-style: normal;
font-weight: 100;
line-height: 1.17em;
text-align: center;
}
input {
display: true;
margin-bottom: 10px;
}
label {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2>test header</h2>
<p>blahblah.</p>
<form>
<select id="month">
<option value="caeqweqwm1">Select NUMBER</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
<option value="5">5</option>
</select>
<label class="1" for="1">/bookmark1.php?f=</label>
<label class="2" for="2">/bookmark2.php?f=</label>
<label class="3" for="3">/bookmark3.php?f=</label>
<label class="4" for="4">/bookmark4.php?f=</label>
<label class="5" for="5">/bookmark5.php?f=</label>
<select id="color">
<option value="qwq">Select Date</option>
<option value="6-28-18">6-28-18</option>
<option value="6-29-18">6-29-18</option>
<option value="6-30-18">6-30-18</option>
<option value="7-1-18">7-1-18</option>
</select>
<label class="6-28-18" for="6-28-18">062818xdasddA</label>
<label class="6-29-18" for="6-29-18">062918x31ewqeqwe</label>
<label class="6-30-18" for="6-30-18">063018x3123233</label>
<label class="7-1-18" for="7-1-18">070118x23232</label>
<input name="formtext1" type="text">
<p id="output"></p>

Full disclosure: I'm not a user of JQuery. If I had to do it, this is (maybe) how I'd do it with hand-written ES5. Note the event listener we're watching for is 'input' instead of 'change' as it seems to work better for all inputs involved.
The entire handler is encapsulated in a function to avoid colliding with JS outside of the function. I also changed the value of your "SELECT a whatever" option to an empty string to test for falsy input values.
function fieldChangeHandler(){
var values = {
month: '',
color: '',
search: ''
}
var output = document.getElementById('output');
function outputString(){
output.innerHTML = values.month + values.color + values.search;
}
function updateValue(e) {
switch(e.target.id) {
case 'search':
values[e.target.id] = e.target.value ?
'&s='+encodeURI(e.target.value) : '';
break;
default:
values[e.target.id] = e.target.value ?
document.querySelector('label[for="'+e.target.value+'"]').innerHTML : '';
}
outputString();
}
var inputs = document.querySelectorAll('.form_field');
inputs = Array.prototype.slice.call(inputs);
inputs.forEach(function(input){
input.addEventListener('input', updateValue);
});
}
fieldChangeHandler();
body {
margin: 10px;
}
form {
margin: 0px auto;
width: 370px;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 13px/18px;
font-weight: 300;
padding: 10px 0px;
text-align: center;
}
.output {
color: #000;
font-family: 'Roboto', sans-serif;
font-size: 13px/20px;
font-style: normal;
font-weight: 100;
text-align: center;
}
h2 {
color: #009CDC;
font-family: 'Roboto', sans-serif;
font-size: 2.5em;
font-style: normal;
font-weight: 100;
line-height: 1.17em;
text-align: center;
}
input {
display: true;
margin-bottom: 10px;
}
label {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2>test header</h2>
<p>blahblah.</p>
<form>
<select id="month" class="form_field">
<option value="">Select NUMBER</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
<option value="5">5</option>
</select>
<label class="1" for="1">/bookmark1.php?f=</label>
<label class="2" for="2">/bookmark2.php?f=</label>
<label class="3" for="3">/bookmark3.php?f=</label>
<label class="4" for="4">/bookmark4.php?f=</label>
<label class="5" for="5">/bookmark5.php?f=</label>
<select id="color" class="form_field">
<option value="">Select Date</option>
<option value="6-28-18">6-28-18</option>
<option value="6-29-18">6-29-18</option>
<option value="6-30-18">6-30-18</option>
<option value="7-1-18">7-1-18</option>
</select>
<label class="6-28-18" for="6-28-18">062818xdasddA</label>
<label class="6-29-18" for="6-29-18">062918x31ewqeqwe</label>
<label class="6-30-18" for="6-30-18">063018x3123233</label>
<label class="7-1-18" for="7-1-18">070118x23232</label>
<input id="search" class="form_field" type="text">
<p id="output"></p>

You aren't considering the changes on input, or reading their values.
$("#month, #color") --> $("#month, #color, input[name='formtext1'")
The value of the input: $("[name='formtext1']").val();
http://jsfiddle.net/ygz32s0u/7/
Another alternative is to add an ID to the input for more precise selection:
http://jsfiddle.net/ygz32s0u/13/

How make to make dropdown without html select

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());
});

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

I am trying to add multiple select in a div which is having a overflow:scroll

$("select").multipleSelect({
});
.scroll {
background-color: #00FFFF;
overflow-x:scroll ;
width:300px;
padding: 10px;
border: 1px solid black;
float: left;
min-height: 300px;
margin: 0 20px 0 0;
}
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
float: left;
margin: 0 20px 0 0;
}
div.hidden {
background-color: #00FF00;
width: 100px;
height: 100px;
overflow: hidden;
}
.ms-parent {
position: static
}
.ms-drop {
width: 200px;
}
.ms-drop.bottom {
top: inherit;
}
.ms-choice > span {
position: static;
}
.ms-choice > div {
position: relative;
top: -26px;
right: -62px;
}
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.<img src="https://placehold.it/465x100">
<div class="test">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<BR>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>
I am trying to add multiple select in a div which is having a overflow:scroll but the drop down is within the div it has to appear outside the div. Can you please suggest me how to solve the issue.

Categories

Resources