5 ms·
Correct if I'm wrong, but this still doesn't allow us to define the dropdown content and selected content for each option separately? Maybe something like this:
by 2freedi 2y ago
Correct if I'm wrong, but this still doesn't allow us to define the dropdown content and selected content for each option separately? Maybe something like this:
<select name="commenters">
<option value="annevk">Anne van Kesteren</option>
<option value="jakearchibald">
<label>Jake Archibald</label>
<selectedcontent>
<div>
<img src="profile.avif" alt="Jake's photo">
<div>Jake Archibald<br><small>@jakearchibald</small></div>
</div>
</selectedcontent>
</option>
<option value="sorvell">Steve Orvell</option>
</select>
The value attribute would be required when using these new sub elements. This structure feels familiar and progressive to me.
Naively, I would imagine that the following JavaScript would cause 1 DOM update, 1 redraw of the option if the dropdown is open, and 1 redraw of the selected option:
document.querySelector('option:selected selectedcontent').innerHTML = 'Jake Archibald';
Obviously, things are different when using multiple. Maybe a `select > selectedcontent` element containing a copy of each `option > selectedcontent` element that is updated on change events.
- jaffathecake 2y ago> Correct if I'm wrong, but this still doesn't allow us to define the dropdown content and selected content for each option separately? There are a few different cases worth considering: # I want to display the option content in the <selectedoption> as is Great! Use <selectedoption> # I want to display the option content in the <selectedoption> a little differently (eg, hide the associated <img> or a different font-weight) In this case, you're probably best off using a little CSS to style the content of <selectedoption> different, eg hide particular elements. # I want to display something completely different in the <selectedoption> <selectedoption> is optional, so one thing you can do here is just… not use it, and instead change the content of your <button> in response to state changes. This requires JavaScript. If you really want to use <selectedoption> for this, then you could do this: <option> <div class="option-content">…</div> <div class="selectedoption-content">…</div> </option> Along with the CSS: option .selectedoption-content { display: none } selectedoption .option-content { display: none }