Get Selected Option Element in
up vote
-2
down vote
favorite
I have a select tag with multiple options, and the first-child is the initial value.
Lets consider the following example. The value make is the initial value.
Now what I am looking for is, When a value selected(toyota) it should change the color of both select tag and selected option.To make it more clear, just follow the following scenario.
When the initial value selected it should follow the following color code,
Selecttag getsgreen.
Optiontag getsblue.
selected optiongetsbluesince it is the initial value.
When a value selected except initial text(make), it should follow the following color code,
Selecttag getsred.
Optiontag getsblue.
selected optiongetsred.
select {
color: green;
}
select.active option {
color: blue;
}
select.active option[selected="selected"] {
color: red;
}<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected="selected">Toyoto</option>
<option value="">Audi</option>
</select>jquery html css select
asked yesterday
Ramesh
1,226319
add a comment |
up vote
-2
down vote
favorite
I have a select tag with multiple options, and the first-child is the initial value.
Lets consider the following example. The value make is the initial value.
Now what I am looking for is, When a value selected(toyota) it should change the color of both select tag and selected option.To make it more clear, just follow the following scenario.
When the initial value selected it should follow the following color code,
Selecttag getsgreen.
Optiontag getsblue.
selected optiongetsbluesince it is the initial value.
When a value selected except initial text(make), it should follow the following color code,
Selecttag getsred.
Optiontag getsblue.
selected optiongetsred.
select {
color: green;
}
select.active option {
color: blue;
}
select.active option[selected="selected"] {
color: red;
}<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected="selected">Toyoto</option>
<option value="">Audi</option>
</select>jquery html css select
asked yesterday
Ramesh
1,226319
2
you would need js to do this as there is no parent selector in css
– Pete
yesterday
Can you give me a working snippet sir? @Pete
– Ramesh
yesterday
3
Nope, you have not tried anything so your question is too broad and therefore off topic for SO - this is not a free coding service, it is for if you get stuck with a particular piece of code you have written. Have a go at something and if it doesn't work, come back with a more specific problem, or you can wait for some rep grabber to do your work for you
– Pete
yesterday
add a comment |
up vote
-2
down vote
favorite
up vote
-2
down vote
favorite
I have a select tag with multiple options, and the first-child is the initial value.
Lets consider the following example. The value make is the initial value.
Now what I am looking for is, When a value selected(toyota) it should change the color of both select tag and selected option.To make it more clear, just follow the following scenario.
When the initial value selected it should follow the following color code,
Selecttag getsgreen.
Optiontag getsblue.
selected optiongetsbluesince it is the initial value.
When a value selected except initial text(make), it should follow the following color code,
Selecttag getsred.
Optiontag getsblue.
selected optiongetsred.
select {
color: green;
}
select.active option {
color: blue;
}
select.active option[selected="selected"] {
color: red;
}<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected="selected">Toyoto</option>
<option value="">Audi</option>
</select>jquery html css select
asked yesterday
Ramesh
1,226319
I have a select tag with multiple options, and the first-child is the initial value.
Lets consider the following example. The value make is the initial value.
Now what I am looking for is, When a value selected(toyota) it should change the color of both select tag and selected option.To make it more clear, just follow the following scenario.
When the initial value selected it should follow the following color code,
Selecttag getsgreen.
Optiontag getsblue.
selected optiongetsbluesince it is the initial value.
When a value selected except initial text(make), it should follow the following color code,
Selecttag getsred.
Optiontag getsblue.
selected optiongetsred.
select {
color: green;
}
select.active option {
color: blue;
}
select.active option[selected="selected"] {
color: red;
}<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected="selected">Toyoto</option>
<option value="">Audi</option>
</select>select {
color: green;
}
select.active option {
color: blue;
}
select.active option[selected="selected"] {
color: red;
}<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected="selected">Toyoto</option>
<option value="">Audi</option>
</select>select {
color: green;
}
select.active option {
color: blue;
}
select.active option[selected="selected"] {
color: red;
}<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected="selected">Toyoto</option>
<option value="">Audi</option>
</select>jquery html css select
jquery html css select
asked yesterday
Ramesh
1,226319
asked yesterday
Ramesh
1,226319
asked yesterday
Ramesh
1,226319
asked yesterday
Ramesh
1,226319
asked yesterday
Ramesh
1,226319
1,226319
2
you would need js to do this as there is no parent selector in css
– Pete
yesterday
Can you give me a working snippet sir? @Pete
– Ramesh
yesterday
3
Nope, you have not tried anything so your question is too broad and therefore off topic for SO - this is not a free coding service, it is for if you get stuck with a particular piece of code you have written. Have a go at something and if it doesn't work, come back with a more specific problem, or you can wait for some rep grabber to do your work for you
– Pete
yesterday
add a comment |
2
you would need js to do this as there is no parent selector in css
– Pete
yesterday
Can you give me a working snippet sir? @Pete
– Ramesh
yesterday
3
Nope, you have not tried anything so your question is too broad and therefore off topic for SO - this is not a free coding service, it is for if you get stuck with a particular piece of code you have written. Have a go at something and if it doesn't work, come back with a more specific problem, or you can wait for some rep grabber to do your work for you
– Pete
yesterday
2
2
you would need js to do this as there is no parent selector in css
– Pete
yesterday
you would need js to do this as there is no parent selector in css
– Pete
yesterday
Can you give me a working snippet sir? @Pete
– Ramesh
yesterday
Can you give me a working snippet sir? @Pete
– Ramesh
yesterday
3
3
Nope, you have not tried anything so your question is too broad and therefore off topic for SO - this is not a free coding service, it is for if you get stuck with a particular piece of code you have written. Have a go at something and if it doesn't work, come back with a more specific problem, or you can wait for some rep grabber to do your work for you
– Pete
yesterday
Nope, you have not tried anything so your question is too broad and therefore off topic for SO - this is not a free coding service, it is for if you get stuck with a particular piece of code you have written. Have a go at something and if it doesn't work, come back with a more specific problem, or you can wait for some rep grabber to do your work for you
– Pete
yesterday
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
You can do this jQuery change event:
$(document).on('change', 'select.make', function() {
if($(this).find(":selected").text()=="Make"){
$(this).css("color","green");
$(this).find(":selected").css("color","blue");
}
else $(this).css("color","red");
});select {
color: green;
}
select option {
color: blue;
}
select option:checked {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected>Toyoto</option>
<option value="">Audi</option>
</select>answered yesterday
SilverSurfer
2,5022723
When the initial value selected it remains the red color sir. I want to avoid that
– Ramesh
yesterday
No sir. Clearly understand when initial value selected (which ismake) theselecttag should begreennotred
– Ramesh
yesterday
@Ramesh I have updated my answer.
– SilverSurfer
yesterday
Excellent answer
– Ramesh
yesterday
Glad to help you.
– SilverSurfer
yesterday
add a comment |
up vote
0
down vote
You need JavaScript for that. You can for example use an eventlistener on the select and add an class for the specific options.
document.querySelector('#variable-select').addEventListener('change', function(e) {
if(e.target.options[e.target.selectedIndex].value === 'toyota') {
e.target.classList.add('blue');
}
})
.blue {
color: blue;
}<select id="variable-select" class="make active">
<option value="">Make</option>
<option value="saab">Saab</option>
<option value="toyota" selected="selected">Toyoto</option>
<option value="audi">Audi</option>
</select>But you can't reliably change the styles of many form elements like the select. Most browsers don't allow styling select elements very much.
answered yesterday
Michael
224110
Probably you misunderstood the question
– Ramesh
yesterday
Maybe, but even after reading it for the third time I can't figure out what you mean exactly with your post. Since the other answer tries to do something similar to mine, maybe you should specify your question a bit
– Michael
yesterday
1
@Michael and that's why this question shouldn't have been answered - OP not willing to put in any work and just criticises you for trying. In future, try not to answer off topic questions as the answer provided will usually not be correct due to the OP not giving enough detail, or as in this case the OP giving limited detail and then wanting more and more as each part of their question is answered
– Pete
yesterday
You've got a point. I'll stick to comments next time, until more details are added. Thanks
– Michael
yesterday
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
You can do this jQuery change event:
$(document).on('change', 'select.make', function() {
if($(this).find(":selected").text()=="Make"){
$(this).css("color","green");
$(this).find(":selected").css("color","blue");
}
else $(this).css("color","red");
});select {
color: green;
}
select option {
color: blue;
}
select option:checked {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected>Toyoto</option>
<option value="">Audi</option>
</select>answered yesterday
SilverSurfer
2,5022723
When the initial value selected it remains the red color sir. I want to avoid that
– Ramesh
yesterday
No sir. Clearly understand when initial value selected (which ismake) theselecttag should begreennotred
– Ramesh
yesterday
@Ramesh I have updated my answer.
– SilverSurfer
yesterday
Excellent answer
– Ramesh
yesterday
Glad to help you.
– SilverSurfer
yesterday
add a comment |
up vote
1
down vote
accepted
You can do this jQuery change event:
$(document).on('change', 'select.make', function() {
if($(this).find(":selected").text()=="Make"){
$(this).css("color","green");
$(this).find(":selected").css("color","blue");
}
else $(this).css("color","red");
});select {
color: green;
}
select option {
color: blue;
}
select option:checked {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected>Toyoto</option>
<option value="">Audi</option>
</select>answered yesterday
SilverSurfer
2,5022723
When the initial value selected it remains the red color sir. I want to avoid that
– Ramesh
yesterday
No sir. Clearly understand when initial value selected (which ismake) theselecttag should begreennotred
– Ramesh
yesterday
@Ramesh I have updated my answer.
– SilverSurfer
yesterday
Excellent answer
– Ramesh
yesterday
Glad to help you.
– SilverSurfer
yesterday
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
You can do this jQuery change event:
$(document).on('change', 'select.make', function() {
if($(this).find(":selected").text()=="Make"){
$(this).css("color","green");
$(this).find(":selected").css("color","blue");
}
else $(this).css("color","red");
});select {
color: green;
}
select option {
color: blue;
}
select option:checked {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected>Toyoto</option>
<option value="">Audi</option>
</select>answered yesterday
SilverSurfer
2,5022723
You can do this jQuery change event:
$(document).on('change', 'select.make', function() {
if($(this).find(":selected").text()=="Make"){
$(this).css("color","green");
$(this).find(":selected").css("color","blue");
}
else $(this).css("color","red");
});select {
color: green;
}
select option {
color: blue;
}
select option:checked {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected>Toyoto</option>
<option value="">Audi</option>
</select>$(document).on('change', 'select.make', function() {
if($(this).find(":selected").text()=="Make"){
$(this).css("color","green");
$(this).find(":selected").css("color","blue");
}
else $(this).css("color","red");
});select {
color: green;
}
select option {
color: blue;
}
select option:checked {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected>Toyoto</option>
<option value="">Audi</option>
</select>$(document).on('change', 'select.make', function() {
if($(this).find(":selected").text()=="Make"){
$(this).css("color","green");
$(this).find(":selected").css("color","blue");
}
else $(this).css("color","red");
});select {
color: green;
}
select option {
color: blue;
}
select option:checked {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="make active">
<option value="">Make</option>
<option value="">Saab</option>
<option value="" selected>Toyoto</option>
<option value="">Audi</option>
</select>answered yesterday
SilverSurfer
2,5022723
edited yesterday
answered yesterday
SilverSurfer
2,5022723
answered yesterday
SilverSurfer
2,5022723
answered yesterday
SilverSurfer
2,5022723
2,5022723
When the initial value selected it remains the red color sir. I want to avoid that
– Ramesh
yesterday
No sir. Clearly understand when initial value selected (which ismake) theselecttag should begreennotred
– Ramesh
yesterday
@Ramesh I have updated my answer.
– SilverSurfer
yesterday
Excellent answer
– Ramesh
yesterday
Glad to help you.
– SilverSurfer
yesterday
add a comment |
When the initial value selected it remains the red color sir. I want to avoid that
– Ramesh
yesterday
No sir. Clearly understand when initial value selected (which ismake) theselecttag should begreennotred
– Ramesh
yesterday
@Ramesh I have updated my answer.
– SilverSurfer
yesterday
Excellent answer
– Ramesh
yesterday
Glad to help you.
– SilverSurfer
yesterday
When the initial value selected it remains the red color sir. I want to avoid that
– Ramesh
yesterday
When the initial value selected it remains the red color sir. I want to avoid that
– Ramesh
yesterday
No sir. Clearly understand when initial value selected (which is
make) the select tag should be green not red– Ramesh
yesterday
No sir. Clearly understand when initial value selected (which is
make) the select tag should be green not red– Ramesh
yesterday
@Ramesh I have updated my answer.
– SilverSurfer
yesterday
@Ramesh I have updated my answer.
– SilverSurfer
yesterday
Excellent answer
– Ramesh
yesterday
Excellent answer
– Ramesh
yesterday
Glad to help you.
– SilverSurfer
yesterday
Glad to help you.
– SilverSurfer
yesterday
add a comment |
up vote
0
down vote
You need JavaScript for that. You can for example use an eventlistener on the select and add an class for the specific options.
document.querySelector('#variable-select').addEventListener('change', function(e) {
if(e.target.options[e.target.selectedIndex].value === 'toyota') {
e.target.classList.add('blue');
}
})
.blue {
color: blue;
}<select id="variable-select" class="make active">
<option value="">Make</option>
<option value="saab">Saab</option>
<option value="toyota" selected="selected">Toyoto</option>
<option value="audi">Audi</option>
</select>But you can't reliably change the styles of many form elements like the select. Most browsers don't allow styling select elements very much.
answered yesterday
Michael
224110
Probably you misunderstood the question
– Ramesh
yesterday
Maybe, but even after reading it for the third time I can't figure out what you mean exactly with your post. Since the other answer tries to do something similar to mine, maybe you should specify your question a bit
– Michael
yesterday
1
@Michael and that's why this question shouldn't have been answered - OP not willing to put in any work and just criticises you for trying. In future, try not to answer off topic questions as the answer provided will usually not be correct due to the OP not giving enough detail, or as in this case the OP giving limited detail and then wanting more and more as each part of their question is answered
– Pete
yesterday
You've got a point. I'll stick to comments next time, until more details are added. Thanks
– Michael
yesterday
add a comment |
up vote
0
down vote
You need JavaScript for that. You can for example use an eventlistener on the select and add an class for the specific options.
document.querySelector('#variable-select').addEventListener('change', function(e) {
if(e.target.options[e.target.selectedIndex].value === 'toyota') {
e.target.classList.add('blue');
}
})
.blue {
color: blue;
}<select id="variable-select" class="make active">
<option value="">Make</option>
<option value="saab">Saab</option>
<option value="toyota" selected="selected">Toyoto</option>
<option value="audi">Audi</option>
</select>But you can't reliably change the styles of many form elements like the select. Most browsers don't allow styling select elements very much.
answered yesterday
Michael
224110
Probably you misunderstood the question
– Ramesh
yesterday
Maybe, but even after reading it for the third time I can't figure out what you mean exactly with your post. Since the other answer tries to do something similar to mine, maybe you should specify your question a bit
– Michael
yesterday
1
@Michael and that's why this question shouldn't have been answered - OP not willing to put in any work and just criticises you for trying. In future, try not to answer off topic questions as the answer provided will usually not be correct due to the OP not giving enough detail, or as in this case the OP giving limited detail and then wanting more and more as each part of their question is answered
– Pete
yesterday
You've got a point. I'll stick to comments next time, until more details are added. Thanks
– Michael
yesterday
add a comment |
up vote
0
down vote
up vote
0
down vote
You need JavaScript for that. You can for example use an eventlistener on the select and add an class for the specific options.
document.querySelector('#variable-select').addEventListener('change', function(e) {
if(e.target.options[e.target.selectedIndex].value === 'toyota') {
e.target.classList.add('blue');
}
})
.blue {
color: blue;
}<select id="variable-select" class="make active">
<option value="">Make</option>
<option value="saab">Saab</option>
<option value="toyota" selected="selected">Toyoto</option>
<option value="audi">Audi</option>
</select>But you can't reliably change the styles of many form elements like the select. Most browsers don't allow styling select elements very much.
answered yesterday
Michael
224110
You need JavaScript for that. You can for example use an eventlistener on the select and add an class for the specific options.
document.querySelector('#variable-select').addEventListener('change', function(e) {
if(e.target.options[e.target.selectedIndex].value === 'toyota') {
e.target.classList.add('blue');
}
})
.blue {
color: blue;
}<select id="variable-select" class="make active">
<option value="">Make</option>
<option value="saab">Saab</option>
<option value="toyota" selected="selected">Toyoto</option>
<option value="audi">Audi</option>
</select>But you can't reliably change the styles of many form elements like the select. Most browsers don't allow styling select elements very much.
document.querySelector('#variable-select').addEventListener('change', function(e) {
if(e.target.options[e.target.selectedIndex].value === 'toyota') {
e.target.classList.add('blue');
}
})
.blue {
color: blue;
}<select id="variable-select" class="make active">
<option value="">Make</option>
<option value="saab">Saab</option>
<option value="toyota" selected="selected">Toyoto</option>
<option value="audi">Audi</option>
</select>document.querySelector('#variable-select').addEventListener('change', function(e) {
if(e.target.options[e.target.selectedIndex].value === 'toyota') {
e.target.classList.add('blue');
}
})
.blue {
color: blue;
}<select id="variable-select" class="make active">
<option value="">Make</option>
<option value="saab">Saab</option>
<option value="toyota" selected="selected">Toyoto</option>
<option value="audi">Audi</option>
</select>answered yesterday
Michael
224110
answered yesterday
Michael
224110
answered yesterday
Michael
224110
answered yesterday
Michael
224110
224110
Probably you misunderstood the question
– Ramesh
yesterday
Maybe, but even after reading it for the third time I can't figure out what you mean exactly with your post. Since the other answer tries to do something similar to mine, maybe you should specify your question a bit
– Michael
yesterday
1
@Michael and that's why this question shouldn't have been answered - OP not willing to put in any work and just criticises you for trying. In future, try not to answer off topic questions as the answer provided will usually not be correct due to the OP not giving enough detail, or as in this case the OP giving limited detail and then wanting more and more as each part of their question is answered
– Pete
yesterday
You've got a point. I'll stick to comments next time, until more details are added. Thanks
– Michael
yesterday
add a comment |
Probably you misunderstood the question
– Ramesh
yesterday
Maybe, but even after reading it for the third time I can't figure out what you mean exactly with your post. Since the other answer tries to do something similar to mine, maybe you should specify your question a bit
– Michael
yesterday
1
@Michael and that's why this question shouldn't have been answered - OP not willing to put in any work and just criticises you for trying. In future, try not to answer off topic questions as the answer provided will usually not be correct due to the OP not giving enough detail, or as in this case the OP giving limited detail and then wanting more and more as each part of their question is answered
– Pete
yesterday
You've got a point. I'll stick to comments next time, until more details are added. Thanks
– Michael
yesterday
Probably you misunderstood the question
– Ramesh
yesterday
Probably you misunderstood the question
– Ramesh
yesterday
Maybe, but even after reading it for the third time I can't figure out what you mean exactly with your post. Since the other answer tries to do something similar to mine, maybe you should specify your question a bit
– Michael
yesterday
Maybe, but even after reading it for the third time I can't figure out what you mean exactly with your post. Since the other answer tries to do something similar to mine, maybe you should specify your question a bit
– Michael
yesterday
1
1
@Michael and that's why this question shouldn't have been answered - OP not willing to put in any work and just criticises you for trying. In future, try not to answer off topic questions as the answer provided will usually not be correct due to the OP not giving enough detail, or as in this case the OP giving limited detail and then wanting more and more as each part of their question is answered
– Pete
yesterday
@Michael and that's why this question shouldn't have been answered - OP not willing to put in any work and just criticises you for trying. In future, try not to answer off topic questions as the answer provided will usually not be correct due to the OP not giving enough detail, or as in this case the OP giving limited detail and then wanting more and more as each part of their question is answered
– Pete
yesterday
You've got a point. I'll stick to comments next time, until more details are added. Thanks
– Michael
yesterday
You've got a point. I'll stick to comments next time, until more details are added. Thanks
– Michael
yesterday
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372029%2fget-selected-option-element-in-select%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
you would need js to do this as there is no parent selector in css
– Pete
yesterday
Can you give me a working snippet sir? @Pete
– Ramesh
yesterday
3
Nope, you have not tried anything so your question is too broad and therefore off topic for SO - this is not a free coding service, it is for if you get stuck with a particular piece of code you have written. Have a go at something and if it doesn't work, come back with a more specific problem, or you can wait for some rep grabber to do your work for you
– Pete
yesterday