:checked Not working the same for an option like it does for a checkbox (code inside)

Question

I am trying to display a div using :checked. I can do this using a checkbox, like so

option:checked {
  height: 100px;
  width: 100px;
}

.tester {
  display: none;
}

select[name=test] option[value=volvo]:checked {
  width: 500px;
  background-color: red;
  font-size: 10px;
  display: block;
}

input[type=checkbox]+label {
  color: #ccc;
  font-style: italic;
}

input[type=checkbox]:checked+div {
  color: #f00;
  font-style: normal;
  display: block;
}

div {
  display: none
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <select name='test'>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <div>
    HI THERE
  </div>
  <input type="checkbox" id="ossm" name="ossm">
  <div class='tester'>
    HELLO
  </div>
  <label for="ossm">CSS is Awesome</label>


</body>

</html>

When I check the checkbox, the HELLO div appears.

When I select volvo in the select, it does not display the HI THERE div.

Am I missing something?

This is just sample code, but the code I am using is a select box that is dynamically created from django.

Should I use something other than a select/option combination here if I want this to work?

You can paste the above code into this to make it work

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_checked2

@Francisaskquestion JavaScript is a last ditch effort here... that being said, would you mind showing me an example of how that would work? — PythonReactor, Aug 23 '19 at 02:31

score 1 · Accepted Answer · answered Aug 23 '19 at 04:15

This is the way if you want to do it in javascript.

document.getElementById('select-test').addEventListener('change', function() {
  var val = this.value;
  if (val == "volvo") {
    document.getElementsByClassName("tester")[0].style.display = "block";
  } else {
    document.getElementsByClassName("tester")[0].style.display = "none";
  }
});

.tester {
  display: none;
}

select[name=test] option[value=volvo]:checked {
  width: 500px;
  background-color: red;
  font-size: 10px;
  display: block;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <select name='test' id="select-test">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <div class='tester'>
    HELLO
  </div>
</body>

</html>

I added an id to the select for easier selecting of element, then removed other things included to your sample code that is irrelevant to javascript solution. So here you have it a script for showing and hiding div base on select value.

I'm gonna go ahead and select this as an answer. I wanted to avoid JS, but it seems there is some confusion in my question. I say that, because it has been marked as a duplicate, but that is a totally different question. -- However, this is exactly what I was looking for, just sans the JS. Thanks! — PythonReactor, Aug 23 '19 at 22:44
My only other question to this would be, how do I get it to load the JS, while initializing the `var = this.value;` as "Volvo", rather than having to click off of it, then back on — PythonReactor, Aug 23 '19 at 22:53

score 0 · Answer 2 · answered Aug 23 '19 at 03:19

When I select volvo in the select, it does not display the HI THERE div.

first you are not writing any css code to do this

select[name=test] option[value=volvo]:checked {
  width: 500px;
  background-color: red;
  font-size: 10px;
  display: block;
}

this will only change the selection color

and you can't do the same with select options to view or hide div

div is sibling of check box so you can select it by +div, but div is not sibling of option actually it's a sibling of it's parent select so you can't do like this

select[name=test] option[value=volvo]:checked + div {
  display: block;

}

Interesting, I was also trying `~`, but to no avail. I could select the div the same way using `input[type=checkbox]:checked`. BUT not when using `option:checked`. I am now realizing this is probably because the parent of `option` is `select`... — PythonReactor, Aug 23 '19 at 22:40

score -1 · Answer 3 · answered Aug 23 '19 at 01:22

-1

You should put your css in a separate file. This will not solve your problem, but will provide better readability

answered Aug 23 '19 at 01:22

code prodigy

77
11

I will fix my question, but this was sample code done by modifying W3 code. Thank you – PythonReactor Aug 23 '19 at 01:24

:checked Not working the same for an option like it does for a checkbox (code inside)

3 Answers3