Search code examples
jquerywordpressgoogle-chromehtml-selectmaterialize

Materialize Select Drop down issue in Google Chrome

I am working on a project using Materialize in WordPress.

It's all working fine, but we have run into a problem when trying to implement in Google Chrome.

Here is my code

    <div class="input-field col s12">
        <select>
            <option>Value 1</option>
            <option>Value 2</option>
            <option>Value 3</option>
            <option>Value 4</option>
            <option>Value 5</option>
       </select>
 </div>

And here is jQuery code

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('select').material_select();
    });
</script>

When i run my project in Google Chrome, in console i face this issue

enter image description here

enter image description here It would be great if anyone has info on this.

Thanks!

Solution

  • You need to give your options a value attribute.

    Try:

       <select>
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
        <option value="4">Value 4</option>
        <option value="5">Value 5</option>
   </select>