如何在选择标签上设置选择，而不是选项标签

Question

I wonder if there is a way to set selected on select tag not option tag

I know this works

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw" selected>VW</option>
  <option value="audi">Audi</option>
</select>

But I want to know if there is a way using select tag.

Something like

<select selected="audi">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

I know second code does not work.

I hope there is a way to work like first code, using select tag.

Thanks!

Answer 1

It is not a default property of the select tag.
To realize this you should make your own function in javascript.
You should also include Jquery for this.
This is total unachieveable in javascript. You can add data attributes to elements.

<select id="cars" data-selected="audi">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

In javascript you can read the value and set it to the option.

var selected = $("#cars").attr("data-id");
$('#cars option[value="'+ selected +'"]').prop('selected', true);

But anyway, why do you want this?
<select selected="audi"> would never work...

Answer 2

The answer is: No.

Although you could write some javascript that would set the selected attribute on an option based on a parameter in the select tag but you would then modify the DOM which results in your example #1.

So no, there is no way in HTML5 to have a DOM like you're asking for.