0

I'm using Rails 5.2.0 with Slim-lang and MaterializeCSS

I'm using javascript to dynamically populate a select dropdown, as shown here.

The code works in the sense that the select element gets populated properly. However, the combo list displayed on screen is not populated! When inspecting the html output in Chrome browser, I found that the "select" is actually comprised of:

<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a">
<ul id="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a" class="dropdown-content select-dropdown" tabindex="0" style="">
</ul>
<select id="crit_type" name="crit_type" onchange="loadCritValues(this.value)" tabindex="-1"><option value="Select Criteria">Select Criteria</option>
  <option value="age_group">age_group</option>
  <option value="gender">gender</option>
  <option value="current_country">current_country</option>
  <option value="home_country">home_country</option>
  <option value="first_language">first_language</option>
</select>

As you can see, the select options are properly populated. But it turns out that the "input" and "ul" elements dictate what gets displayed on screen. And the "ul" is naturally empty.

Is there any way to solve this issue, other than having to also modify the "ul" content?

anode84
  • 308
  • 2
  • 9

1 Answers1

0

It turns out that the issue I'm facing with select is linked to MaterializeCSS. The HTML it generates is structured in the format I mentioned as per:

https://materializecss.com/select.html

I can just override that behaviour by assigning 'browser-default' class to the select tag:

select id="crit_type" name="crit_type" onchange="loadCritValues()" class="browser-default" =options_for_select(@crit_types)

This will provide the select tag only without the additional html elements, and allows me to manipulate the select with javascript.

anode84
  • 308
  • 2
  • 9