Narxx Narxx - 3 months ago 112
CSS Question

Materialize CSS - Select does not have name nor proper value in DOM

I'm having trouble understanding how materialize CSS

<select>
tag works.

In regular HTML select tags, you'd insert a
name=""
attribute, and for each option, a
value=""
attribute, which seem to be missing in materialize CSS.

This code:

<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>


renders into this in DOM:

<div class="input-field col s12 m6">
<div class="select-wrapper"><span class="caret">▼</span>
<input class="select-dropdown" readonly="true" data-activates="select-options-273ec07d-e7c4-e689-e2e3-6a57ff2f6293" value="Choose your option" type="text">
<ul style="width: 296px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-273ec07d-e7c4-e689-e2e3-6a57ff2f6293" class="dropdown-content select-dropdown">
<li class="disabled"><span>Choose your option</span></li><li class="active selected"><span>Option 1</span></li><li class=""><span>Option 2</span></li>
<li class=""><span>Option 3</span></li>
</ul>
<select class="initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<label>Materialize Select</label>
</div>


Problems I am having:


  1. Where and how do I set the name for that select element (to be represented accordingly in the rendered
    input
    element)?

  2. The values are the texts being displayed in the list. I wish to have different values than the display strings, e.g:



<option value="1">regular style</option>
<option value="2">bold style</option>
<option value="3">italic style</option>


Thanks all in advance :)

Answer

Materialize handles <select> replacement like most other libraries; follow standard HTML conventions like name="foo" or <option value="A">But I'm showing other text here</option>.

The output will take these into consideration when creating the prettier, functional form.

Note: The Materialize CSS documentation does show the <select> tag without most of the common elements (like name=""), but I think this is more to present the cleanest, most minimal code possible.

Comments