Home / Questions / 13182
Accepted
Alvaro Montoro
Asked: 2020-06-08 20:37:42 +0800 CST 2020-06-08 20:37:42 +0800 CST

Update text depending on selected values ​​in a list *WITHOUT JAVASCRIPT*

  • 772

At work we run into an interesting problem: we have a page with a dropdown list that, when the selected option changes, updates the values ​​of a series of items from the values ​​of a JSON variable.

The HTML is something like this (simplified):

<select id="paises">
  <option value="chile">Chile</option>
  <option value="colombia">Colombia</option>
  <option value="ecuador">Ecuador</option>
</select>

<div id="valores">
  Pais: <span id="pais"></span><br/>
  Teléfono: <span id="telefono"></span><br/>
  Email: <span id="email"></span>
</div>

And the JSON is something like this (simplified):

info = {
    "chile": {
        "nombre": "Chile",
        "telefono": "123456789",
        "email": "[email protected]"
    },
    "colombia": {
        "nombre": "Colombia",
        "telefono": "192837465",
        "email": "[email protected]"
    },
    "ecuador": {
        "nombre": "Ecuador",
        "telefono": "987654321",
        "email": "[email protected]"
    }
}

The JavaScript code is not relevant to the question, but the idea is simple: depending on the selected country, the span. For example, if Chile is selected, the one spanwith id "country" will contain "Chile", the one spanwith id "phone" will show "123456789", etc, etc.

Now that page has been moved to a new CMS and for different reasons we are limited in the components we can use and none of them allow us to embed JavaScript (not even inline ), they only let us embed HTML and CSS.

So the question would be: how can the behavior described above be simulated, but exclusively using HTML+CSS without any JavaScript or JSON?

Regarding HTML and CSS we have no limitations: we can reorder/arrange the elements as we want, we can add new elements/remove existing elements, we can add as much code as we want... as long as it doesn't contain any script, just HTML and CSS.

For example, we finally found a solution (I'll share it in the answers below for inspiration) by replacing the selectwith a list ul, transforming the JSON to CSS (with :beforeand content) and with a series of inputhidden s... but the problem is that it takes up too much space and we want to know if there would be a different method.

html

3 Answers

  1. Best Answer

    Although an ingenious solution, more than a space problem, I see two drawbacks:

    • Somewhat complex to maintain: you are putting content into the styles, so there are more places where the information will have to be modified.
    • Little accessible: being part of the style, the data is not indexed by search engines, it is not "perceivable" (eg: it cannot be read by an automatic reader) and, what is worse, it cannot be copied, something fundamental for data contact.

    I suggest you turn your proposal around and leave the information inside the html body. Something like that:

    div#paises > div { display: none; }
#chile:checked~ div#chile { display: block; }
#colombia:checked~ div#colombia { display: block; }
#ecuador:checked~ div#ecuador { display: block; }
    <ul id="dropdown">
    <li>
      Selecciona un país
      <ul>
        <li><label for="chile">Chile</label></li>
        <li><label for="colombia">Colombia</label></li>
        <li><label for="ecuador">Ecuador</label></li>
      </ul>
    </li>
</ul>

<div id="paises">
      <input type="radio" name="paises" id="chile" />
      <input type="radio" name="paises" id="colombia" />
      <input type="radio" name="paises" id="ecuador" />
      <div id="chile">
        País: Chile <br/>
        Teléfono: 123456789 <br/>
        Email: [email protected]
      </div>
      <div id="colombia">
        País: Colombia <br/>
        Teléfono: 987654321 <br/>
        Email: [email protected]
      </div>
      <div id="ecuador">
        País: Ecuador <br/>
        Teléfono: 192837465 <br/>
        Email: [email protected]
      </div>
</div>

    • 8

  2. This is the solution we found (I leave it here in case it helps people to see what we were looking for and/or in case it serves as a reference), although the problem with it is that it gets very complicated (the list of countries is not only 3, but 30) and ends up needing a lot of extra code.

    Surely something could be done with :targetinstead of :checkedand it would simplify things (you could change all labelto aand avoid all checkboxes).

    The idea is the following:

    • In the HTML:
      • We remove the selectand simulate a dropdown list using ul;
      • We add a inputtype radiofor each country, before the fields that we want to be updated;
      • In each of the li, ulwe add a labelfor each of the inputones we created in the previous step;
    • In the CSS:
      • We add the different styles to simulate the dropdown ;
      • Using the pseudo-class :checkedand the selector ~, we add CSS rules that will add the content depending on the radius that is currently selected.

    The code looks like this at the end:

    #dropdown, #dropdown > li > ul  { 
  width:200px; 
  overflow:visible;
  line-height:20px; 
  border:1px solid gray;
  background:white;
  list-style:none;
  padding-left:0;
  margin-left:0;
  position:relative;
}

#dropdown:after {
  content:"\25bc";
  position:absolute;
  font-size:0.75em;
  right:2px;
  top:0;
}

#dropdown > li { 
  margin-left:0; 
  line-height:20px;
  font-size:0.9em;
}

#dropdown > li > ul {
  display:none;
}


#dropdown > li:hover > ul {
  display:block;  
  position:absolute;
  left:-1px;
}

#dropdown > li > ul > li {
  margin-left:0; 
  line-height:20px;
  padding-left:2px;
}

#dropdown > li > ul > li:hover {
  background-color:rgba(0,0,0,0.05);
}

#dropdown > li > ul > li label {
  display:block;
}

input[name="paises"] { display:none; }


#chile:checked ~ #pais:before { content:"Chile"; }
#chile:checked ~ #telefono:before { content:"123456789"; }
#chile:checked ~ #email:before { content:"[email protected]"; }
#colombia:checked ~ #pais:before { content:"Colombia"; }
#colombia:checked ~ #telefono:before { content:"987654321"; }
#colombia:checked ~ #email:before { content:"[email protected]"; }
#ecuador:checked ~ #pais:before { content:"Ecuador"; }
#ecuador:checked ~ #telefono:before { content:"192837465"; }
#ecuador:checked ~ #email:before { content:"[email protected]"; }
    <ul id="dropdown">
  <li>
    Selecciona un país
    <ul>
      <li><label for="chile">Chile</label></li>
      <li><label for="colombia">Colombia</label></li>
      <li><label for="ecuador">Ecuador</label></li>
    </ul>
  </li>
</ul>

<div>
  <input type="radio" name="paises" id="chile" />
  <input type="radio" name="paises" id="colombia" />
  <input type="radio" name="paises" id="ecuador" />
  País: <span id="pais"></span><br/>
  Teléfono: <span id="telefono"></span><br/>
  Email: <span id="email"></span>
</div>

    • 6

  3. Using only the :target selector, it can be simplified a bit.

    body {background: #f3f5f6;}
ul {
    margin: 0;
    list-style: none;
    padding: 0;
    width: 200px;
}
ul#dropdown {float: left;}
ul#dropdown li {
    position: relative;
    line-height:30px;
    z-index: 10;
    background: white;
    text-indent: 10px;
    border-top: 1px solid #eee;
}
ul#dropdown > li:before {
    content: "";
    border-color: #7d7d7d;
    border-style: solid;
    border-width: 0 1px 1px 0;
    width: 6px;
    height: 6px;
    position: absolute;
    right: 15px;
    top: 11px;
    transform: rotate(45deg);
    z-index: 100;
}
ul#dropdown > li:hover:before {transform: rotate(-135deg);top: 13px;}
ul#dropdown li a {display: block;}
ul#dropdown ul {display: none;}
ul#dropdown li:hover ul {display: block;}
ul#dropdown ul li:hover {background: #eee;}
div#paises {float: left;}
div#paises > div {
    background: white;
    width: 200px;
    margin-left: 10px;
    padding: 15px;
    display: none;
}
:target {display: block !important;}
    <ul id="dropdown">
  <li>Selecciona un país
    <ul class="selector">
      <li><a href="#chile">Chile</a></li>
      <li><a href="#colombia">Colombia</a></li>
      <li><a href="#ecuador">Ecuador</a></li>
    </ul>
  </li>
</ul>

<div id="paises">
  <div id="chile">
    País: Chile <br/>
    Teléfono: 123456789 <br/>
    Email: [email protected]
  </div>
  <div id="colombia">
    País: Colombia <br/>
    Teléfono: 987654321 <br/>
    Email: [email protected]
  </div>
  <div id="ecuador">
    País: Ecuador <br/>
    Teléfono: 192837465 <br/>
    Email: [email protected]
  </div>
</div>

    • 4