（对CSS框架进行材料化）'required'属性在实现选择标记中不起作用

Question

This is the following HTML structure:

<div class="input-field col s5 col m5">
   <select required id="passengerDestination" name="passengerDestination{{ $i }}" class="validate">
        <option selected="" disabled="" value="">Select Destination</option>
        <option selected="" disabled="" value="">Select value</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option>...</option>
    </select>
    <label class="white-text" for="passengerDestination">Destination</label>
 </div>

Please don't mind the {{ $i }} because I am using Laravel and the select tag is inside the @for loop.

The problem is that when I changed the class of the select tag to browser-default it triggers the required attribute of the select tag.

But that is not the thing I want. I want to use require attribute of the select tag without using the class browser-default .

How can this be done?

Material Framework used:

materializecss.com

Answer 1

The select you are seeing is a representation of the hidden, underlying native select. If you or some other code changes the native select, you need to call

$('{your selector}').material_select();

This will rebind the representation to the native select.