I am trying to change the color of the selected option in a select element while it's in the drop down and while it's displayed in main window. So far I have been able to change the color of all the options.
<select id="drop-down" onchange="colorChange(event);">
<option value="">--</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
This is the function I'm using.
var one = "one";
var two = "two";
var three = "three";
var four = "four";
function colorChange(event){
if(event.target.value == one){
event.target.style.color = "#67D986";
} else if (event.target.value == two || three || four){
event.target.style.color = "#f00";
} else{
alert("There has been an error!!!");
}
};
There is problem in your else if in OR condition, to add conditions in OR use following
} else if (event.target.value == two || event.target.value == three || event.target.value == four) {
var colors = {
one: '#67D986',
two: '#f00',
three: '#f00',
four: '#f00'
};
$('#drop-down').on('change', function(e) {
var value = $('option:selected').val();
$('option').css('color', '#000');
if (!value) {
alert("There has been an error!!!");
} else {
$('option:selected').css('color', colors[value]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="drop-down">
<option value="">--</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
Do it in jquery way if you like:
$(document).ready(function(){
$("#drop-down").on("change",function(){
var selectedVal = $(this).val();
switch(selectedVal)
{
case "one": $(this).css("color","red")
break;
case "two": $(this).css("color","blue");
break;
}
});
});
Html
<select id="drop-down" >
<option value="">--</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
hi i think you can achieve this even by css only here i is that check out
select{
margin:40px;
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
select option {
margin:40px;
background: rgba(0,0,0,0.3);
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
select option[val="one"]{
background: #67D986;
}
select option[val="two"],select option[val="three"],select option[val="four"]{
background: #f00;
}
<select id="drop-down">
<option val="">-----------------</option>
<option val="one">One</option>
<option val="two">Two</option>
<option val="three">Three</option>
<option val="four">Four</option>
</select>
Check By only CSS
Related
I have something like this:
<select multiple>
<option value="all-item" selected>All</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
What I need:
After init only "All" is selected (done).
If the customer selected other options, "all-items" should be unselected.
If the customer has select e.q 2 options and after that will select "all-item", an only first option should be select and another should be unselected.
I tried to do it like that:
$("#all-item").on('focus', function() {
$("#selecty option").each(function(){
$(this).attr("selected", "selected");
});
});
<select multiple>
<option value="all-item" selected>All</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
but doesn't work.
Anybody can help?
I made it with vanilla JS, because you don't need JQuery for that :
function handleChange(element) {
if(element.value === 'all-item') {
const options = [...element.options];
for (let opt of options) {
if (opt.value !== '' && opt.value != 'all-item') { opt.selected = true; }
else { opt.selected = false; }
}
}
}
option {
padding: 12px;
}
<select id="select" multiple onchange="handleChange(this)">
<option value="">Chose an option</option>
<option value="all-item">All</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
EDIT
To unselect every other option :
function handleChange(element) {
if(element.value === 'all-item') {
const options = [...element.options];
for (let opt of options) {
if (opt.value === 'all-item') { opt.selected = true; }
else { opt.selected = false; }
}
}
}
option {
padding: 12px;
}
<select id="select" multiple onchange="handleChange(this)">
<option value="">Chose an option</option>
<option value="all-item">All</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
You can simply check if all-item is selected with .is(':selected') when the user selects anything, and unselect anything else with .attr('selected',false) :
$('select').on('change',function(){
if($('option[value="all-item"]',this).is(':selected')){
$('option:not([value="all-item"])',this).attr('selected',false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
<option value="all-item" selected>All</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
I am trying to use an if else statement to add 'selected' to an option from the select menu. The only problem I have is that I'm not sure why once I go back to value 'top' option[1] is still 'selected'. It's like the first if doesn't execute the condition, although i see if i do the console log it does change to the first if...
<select id='selectdesign'>
<option value="0"></option>
<option value="top">top</option>
<option value="jeans">jeans</option>
</select>
<select id='selectmenu'>
<option value="0"></option>
<option value="1">top-blue</option>
<option value="2">top-pink</option>
<option value="3">bottoms-red</option>
<option value="4">bottoms-violet</option>
</select>
function selectOption(element) {
if (element.value == 'top') {
console.log('if');
option[2].setAttribute('selected', true);
} else if (element.value == 'jeans') {
console.log('else if');
option[1].setAttribute('selected', true);
}
}
i am calling the selectOption function on selectDesign on change
You need to access the right value of the select element, like
element.options[element.selectedIndex].value
and use
document.getElementById('selectmenu').selectedIndex = 1;
for setting an index of the options.
function selectOption(element) {
if (element.options[element.selectedIndex].value == 'top') {
document.getElementById('selectmenu').selectedIndex = 1;
} else if (element.options[element.selectedIndex].value == 'jeans') {
document.getElementById('selectmenu').selectedIndex = 3;
}
}
<select id="selectdesign" onchange="selectOption(this);">
<option value="0"></option>
<option value="top">top</option>
<option value="jeans">jeans</option>
</select>
<select id="selectmenu">
<option value="0"></option>
<option value="1">top-blue</option>
<option value="2">top-pink</option>
<option value="3">bottoms-red</option>
<option value="4">bottoms-violet</option>
</select>
Version with an object for preselecting options.
function selectOption(element) {
var indices = {
top: 1,
jeans: 3,
},
value = element.options[element.selectedIndex].value
if (value in indices) {
document.getElementById('selectmenu').selectedIndex = indices[value];
}
}
<select id="selectdesign" onchange="selectOption(this);">
<option value="0"></option>
<option value="top">top</option>
<option value="jeans">jeans</option>
</select>
<select id="selectmenu">
<option value="0"></option>
<option value="1">top-blue</option>
<option value="2">top-pink</option>
<option value="3">bottoms-red</option>
<option value="4">bottoms-violet</option>
</select>
I Have html select form like this:
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
In my case I need to make it so that if I choose "1" at the first select form (# id_num), then the next select form (#id_choices) should only show "car" and "bike" options, and if I choose "2", #id_choices should only show "house" and "money", and also the rest.. But if i select "all", then every options on #id_choices should be shown.
How to solve that condition by using jQuery?
You can use jQuery's $.inArray() to filter your options, and make them display: none; depending upon the occurence of the item in the array,
Please have a look on the code below:
$(function() {
$('#id_num').on('change', function(e) {
if ($(this).val() == 1) {
var arr = ['car', 'bike'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else if ($(this).val() == 2) {
var arr = ['house', 'money'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else if ($(this).val() == 3) {
var arr = ['plane', 'wife'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else {
$('#id_choices option').each(function(i) {
$(this).css('display', 'inline-block');
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option disabled selected>Select</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house' >house</option>
<option value='money' >money</option>
<option value='plane' >plane</option>
<option value='wife' >wife</option>
</select>
Hope this helps!
You can run a function once when the page loads and then every time #id_num changes, such that all the visible #id_choices options are removed (using remove()), and then only the relevant options are re-added to #id_choices (using append()) to replace them.
Working Example:
$(document).ready(function(){
var car = '<option value="car">car</option>';
var bike = '<option value="bike">bike</option>';
var house = '<option value="house">house</option>';
var money = '<option value="money">money</option>';
var plane = '<option value="plane">plane</option>';
var wife = '<option value="wife">wife</option>';
function options1() {
$('#id_choices').append(car);
$('#id_choices').append(bike);
}
function options2() {
$('#id_choices').append(house);
$('#id_choices').append(money);
}
function options3() {
$('#id_choices').append(plane);
$('#id_choices').append(wife);
}
function displayOptions() {
$('#id_choices option').remove();
switch ($('#id_num option:selected' ).text()) {
case('1') : options1(); break;
case('2') : options2(); break;
case('3') : options3(); break;
case('all') : options1(); options2(); options3(); break;
}
}
$('#id_num').change(function(){displayOptions();});
displayOptions();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
For the sake of completeness, here is the same approach as above, but this time in native javascript, so you can compare and contrast with the jQuery above:
var numbers = document.getElementById('id_num');
var choices = document.getElementById('id_choices');
function displayOptions() {
var optionSet1 = ['car', 'bike'];
var optionSet2 = ['house', 'money'];
var optionSet3 = ['plane', 'wife'];
var oldOptions = choices.getElementsByTagName('option');
var selected = numbers.options[numbers.selectedIndex].text;
while (oldOptions.length > 0) {
choices.removeChild(oldOptions[0]);
}
switch (selected) {
case('1') : var optionSet = optionSet1; break;
case('2') : optionSet = optionSet2; break;
case('3') : optionSet = optionSet3; break;
case('all') : optionSet = optionSet1.concat(optionSet2).concat(optionSet3); break;
}
for (var i = 0; i < optionSet.length; i++) {
var option = document.createElement('option');
option.setAttribute('value',optionSet[i]);
option.textContent = optionSet[i];
choices.appendChild(option);
}
}
numbers.addEventListener('change',displayOptions,false);
window.addEventListener('load',displayOptions,false);
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
Add the attribute display with a value of none using .prop() instead of using disabled attribute (like in Saumya's answer) in case you want them completely invisible instead of just disabled/grayed-out
there may be a better way, however this does work.. you can also add hide/display classes to any other elements
$(document).ready(function () { $('#id_num').on('change', change) });
function change() {
$('#id_choices > option').hide();
$($(this).find(':selected').attr('clssval')).show();
}
.sel{display:none;}
.num1{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option value='1' clssval=".num1">1</option>
<option value='2' clssval=".num2">2</option>
<option value='3' clssval=".num3">3</option>
<option value='' clssval=".num1,.num2,.num3">all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car' class="sel num1">car</option>
<option value='bike' class="sel num1">bike</option>
<option value='house' class="sel num2">house</option>
<option value='money' class="sel num2">money</option>
<option value='plane' class="sel num3">plane</option>
<option value='wife' class="sel num3">wife</option>
</select>
I have three select menus.
<form>
<select id="mass" name="mass">
<option value="Blank" selected>--</option>
<option value="Light">Light</option>
<option value="Medium">Medium</option>
<option value="Heavy">Heavy</option>
</select>
<select id="colour" name="colour">
<option value="Blank" selected>--</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<select id="textureColour" name="textureColour">
<option value="Blank" selected>--</option>
<option value="Orange">Orange</option>
<option value="Purple">Purple</option>
<option value="Black">Black</option>
</select>
</form>
I want the first menu to display, and the second and third menus to be hidden, until called upon.
If the first menu changes from the default option, I want the second menu to display.
Once a selection has been made within the second menu, I want the third menu to display.
However, I only want the third menu to display, if the selected value in the first menu is either 'Medium' or 'Heavy'. Selecting the default 'Blank' or 'Light' should hide the third menu.
Currently it isn't functioning as I would I like.
$(function() {
var mass = $('#mass');
var colour = $('#colour');
var textureColour = $('#textureColour');
mass.change(function() {
if (mass.val() != 'Blank') {
$(colour).show();
} else {
$(colour).hide();
}
if (mass.val() === 'Light') {
$(textureColour).show();
} else {
$(textureColour).hide();
}
}).trigger('change');
colour.change(function() {
if ((mass.val() === 'Medium') || (mass.val() === 'Heavy')) {
$(textureColour).show();
} else {
$(textureColour).hide();
}
}).trigger('change');
});
JSFiddle
So, I guess that you want something like this
$(function() {
var mass = $('#mass');
var colour = $('#colour');
var textureColour = $('#textureColour');
mass.change(function() {
if (mass.val() != 'Blank') {
$(colour).show();
$(colour).change();
} else {
$(colour).val('Blank');
$(textureColour).val('Blank');
$(colour).hide();
$(textureColour).hide();
}
});
colour.change(function() {
if ((mass.val() === 'Medium') || (mass.val() === 'Heavy') && colour.val() !== 'Blank') {
$(textureColour).show();
} else {
$(textureColour).hide();
}
});
});
#colour {
display: none;
}
#textureColour {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="mass" name="mass">
<option value="Blank" selected>--</option>
<option value="Light">Light</option>
<option value="Medium">Medium</option>
<option value="Heavy">Heavy</option>
</select>
<select id="colour" name="colour">
<option value="Blank" selected>--</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<select id="textureColour" name="textureColour">
<option value="Blank" selected>--</option>
<option value="Orange">Orange</option>
<option value="Purple">Purple</option>
<option value="Black">Black</option>
</select>
</form>
Hope it helps :)
Maybe you just forget to write $(colour).hide(); and $(textureColour).hide(); instead of $(colour).hide; and $(textureColour).hide;.
EDIT
I had to change complete your code. I think this is what you are looking for.
$(function() {
var mass = $('#mass');
var colour = $('#colour');
var textureColour = $('#textureColour');
mass.change(function() {
if(mass.val() == 'Blank'){
colour.hide();
textureColour.hide();
}else{
colour.show();
if(colour.val() != 'Blank') textureColour.show();
}
if(mass.val() == 'Light') textureColour.hide();
}).trigger('change');
colour.change(function() {
if(colour.val() == 'Blank') return textureColour.hide();
if('Medium,Heavy'.split(',').indexOf(mass.val()) != -1){
textureColour.show();
}
}).trigger('change');
});
I updated the javascript and now it is functioning how I wanted it too:
$(function() {
var mass = $('#mass');
var colour = $('#colour');
var textureColour = $('#textureColour');
mass.change(function() {
if (mass.val() != 'Blank') {
$(colour).show();
$(colour).change();
} else {
$(colour).val('Blank');
$(textureColour).val('Blank');
$(colour).hide();
$(textureColour).hide();
}
});
colour.change(function() {
if (((mass.val() === 'Medium') && colour.val() !== 'Blank') || ((mass.val() === 'Heavy') && colour.val() !== 'Blank')) {
$(textureColour).show();
} else {
$(textureColour).hide();
}
});
});
JSFiddle
I'm searching and searching and can not find anything exactly what I need.
So I need javascript, that will select option from dropdown, but not by the option value number, but name.
I have:
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
So I need to select • Jawor by name, not by id - it's the most important. How do I make it work?
For you is it like;
var options = document.getElementsByClassName("aa")[0].options,
name ="Jawor";
for(i = 0; i < options.length; i++){
if(options[i].text.indexOf(name) > -1){
options[i].selected = true;
break;
}
}
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>
U need to Use onChange Event Handler ... for example
<select onchange="showSelected()">
Then write your script ...
<script>
function showSelected(){
var s=document.getElementById('local'); //refers to that select with all options
var selectText=s.options[s.selectedIndex].text // takes the one which the user will select
alert(selectText) //Showing the text selected ...
}
</script>
Rest of your code is okay !
<select class="aa" id="local" name="local" onchange='showSelected'()>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>
Using jquery here. You can use the following function:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
}
})
}
A demo:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
return false;
}
})
}
//use the function
setTimeout(function() {
selectFromDropdown('#local', '• Dzierżoniów')
}, 1000)
setTimeout(function() {
selectFromDropdown('#local', '• Jawor')
}, 4000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="aa" id="local" name="local">
<option value="">Select</option>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>
for chrome console use this
document.getElementById("id").selectedIndex = '3'; or
document.getElementById('id').value = 'BA';