I have a dropdown which has different colours for each option, however when the option is chosen I would like the select background to change to the color I have chosen.
I have found an answer to this query, however this uses inline styles and I would like to use my external CSS.
Changing color of a row in dropdown list
See My JSFiddle
<select name="select" style="background-color: #ff0000" onchange="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor;">
<option style="background-color: #ff0000" value="1">Red</option>
<option style="background-color: #00ff00" value="2">Green</option>
<option style="background-color: #0000ff" value="3">Blue</option>
</select>
if you want to use external css, then
<select name="select" class="Red" onchange="this.className = this.options[this.selectedIndex].className">
<option class="Red" value="1">Red</option>
<option class="Green" value="2">Green</option>
<option class="Blue" value="3">Blue</option>
</select>
here is the updated jsfiddle
Related
This is my markup; when I style the option tag it will not take any style properties.
<form>
<select>
<option value='Select Reason'>
Select Reason
</option>
<option value='Select Reason' >
Select Reason
</option>
<option value='Select Reason' >
Select Reason
</option>enter code here
</select>
</form>
I'm useing Laravel 5.6. I could make Single select boxes
that is working fine.
I read this page
https://select2.org/getting-started/basic-usage
and I use this CDN
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
I pasted this code below to my blade file. I can see items and I can
click them. but there is no multi view come out and cross mark too.
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
What is wrong my code?
Create a custom JS file. And link it to your html:
<script src="YourJsFile.js"></script>
In YourJsFile.js:
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
Your html file:
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
<option value="HI">Hawaii</option>
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
<option value="WY">Wyoming</option>
</select>
I'm trying to do something like this on the dropdown
I already tried different tag but failed to see the expected
<option id="makeDefault" value="0">Make <label class="option-placeholder">e.g. BMW, Mercedes</label></option>
Try this:
<select>
<option value="" disabled selected hidden>MAKE e.g. BMW...</option>
<option value="0">list item 1</option>
<option value="1">list item 2</option>
</select>
FIDDLE: https://jsfiddle.net/L0k6x0dh/1/
If I use the following xPath:
//*[contains(#class, 'some-label') and contains(., 'MT:Week')]
It gets me exactly one element (a <span>) as expected. So far so good.
What I want is to get the <select> right next to it, but by doing this:
//*[contains(#class, 'some-label') and contains(., 'MT:Week')]/following::select
It already selects two <select> elements. How do I select just one without using the name attribute (!) ?
The HTML:
<div>
<label>
<span class="some-label">MT:Month</span>
<select name="month" id="someID">
<option selected="selected" value="12">March 2015</option>
</select>
</label>
</div>
<div>
<label>
<span class="some-label">MT:Week</span>
<!-- want to select just the below one -->
<select class="width-50px" name="monthWeek" id="someOtherID">
<option selected="selected" value="">All</option>
<option value="CalendarWeek{year=2015, week=9}">9</option>
<option value="CalendarWeek{year=2015, week=10}">10</option>
</select>
</label>
</div>
<div>
<label>
<span class="some-label">MT:Type</span>
<select name="type" id="anotherID">
<option selected="selected" value="">All</option>
<option value="someValue">Value 1</option>
<option value="someValue2">Value 2</option>
</select>
</label>
</div>
You could use [1] to get the first:
//*[contains(#class, 'some-label') and contains(., 'MT:Week')]/following::select[1]
But you probably only want the one within the same label, so use following-sibling:
//*[contains(#class, 'some-label') and contains(., 'MT:Week')]/following-sibling::select
I am looking for JavaScript or in jquery for my custom dropdown menu
<form name="menu">
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Courses</option>
<option value="http://www.google.com">Course1</option>
<option value="http://www.youtube.com">Course2</option>
<option value="http://www.yahoo.com">Course3</option>
</select>
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Location</option>
<option value="http://www.google.com">Location1</option>
<option value="http://www.youtube.com">Location2</option>
<option value="http://www.yahoo.com">Location3</option>
</select>
</form>
http://jsfiddle.net/kundansingh/d4FEV/2/
in this if i select any of the course and then the location it should redirect to a paticular url, so for each course, different locations will be there and url
Follow steps:
Just pass the value(url) to a javascript function as an argument.
Grab that value in that javascript function.
Redirect the url (might use window.location.assign(url) function)`