javascript - Materialize CSS - Select Doesn't Seem to Render

Question

I am currently working with materialize CSS and it seems I've gotten snagged with the select fields.

I'm using the example provided from their site but unfortunately it it's rendering in the view whatsoever. I was wondering if someone else might be able to help.

What I am trying to do is create a row with 2 end spacers that provide padding - then within the inner two row items there should be a search text input and a search select dropdown.

This is the example I'm working from: http://materializecss.com/forms.html

Thank you in advance.

Here is the snippet of code in question.

<div class="row">
<form class="col s12">
    <div class="row">
        <div class="input-field col s2"></div>
        <div class="input-field col s5">
            <input id="icon_prefix" type="text" class="validate" />
            <label for="icon_prefix">Search</label>
        </div>
        <div class="input-field col s3">
            <label>Materialize Select</label>
            <select>
                <option value="" disabled="disabled" selected="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>
        <div class="input-field col s2"></div>
    </div>
</form>

Answer 1

Because they override the browser default, the select styling needs Javascript to run. You need to include the Materialize Javascript file, and then call

$(document).ready(function() {
    $('select').formSelect();
    // Old way
    // $('select').material_select();
});

after you've loaded that file.