This is related to https://mdbootstrap.com/support/jquery/javascript-interaction-onclick-with-searchable-material-select/

When you have a form like in the example:

<select class="mdb-select md-form" searchable="Search here..">
  <option value="" disabled selected>Choose your country</option>
  <option value="1">USA</option>
  <option value="2">Germany</option>
  <option value="3">France</option>
  <option value="3">Poland</option>
  <option value="3">Japan</option>
</select>

After it is initialized, the option values are no longer associated with the selecty-dropdown-y.... thing that material creates.

In this case, when you select "Germany", the associated value you can get back is "Germany", and I don't see a way to find "2" with Javascript.

For example, this select is materialized to look as such:

<div class="select-wrapper mdb-select md-form"><span class="caret">▼</span><input type="text" class="select-dropdown form-control" readonly="true" required="false" data-activates="select-options-fae367ec-c094-4155-9c83-cbd7d0076496" value="">
    <ul id="select-options-fae367ec-c094-4155-9c83-cbd7d0076496" class="dropdown-content select-dropdown w-100" style="width: 539.156px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;"><span class="search-wrap ml-2"><div class="md-form mt-0"><input type="text" class="search w-100 d-block" tabindex="-1" placeholder="Search here.."></div></span>
        <li class="disabled   "><span class="filtrable"> Choose your country   </span></li>
        <li class="   "><span class="filtrable"> USA   </span></li>
        <li class="   "><span class="filtrable"> Germany   </span></li>
        <li class="   "><span class="filtrable"> France   </span></li>
        <li class="   "><span class="filtrable"> Poland   </span></li>
        <li class="   "><span class="filtrable"> Japan   </span></li>
    </ul><select class="mdb-select md-form initialized" searchable="Search here..">
          <option value="" disabled="" selected="">Choose your country</option>
          <option value="1">USA</option>
          <option value="2">Germany</option>
          <option value="3">France</option>
          <option value="3">Poland</option>
          <option value="3">Japan</option>
        </select></div>

If you click the select and then click "Germany" and then try to use Javascript to inspect the inputs:

$('.md-form input').val();

This returns "Germany"

$('.md-form .dropdown-content input').val();

This returns "" no matter what is displayed in the dropdown.

I am trying to figure out how, via Javascript, I can get the original option value, which would be "2" for this form. The original select never ends up with any selected options, so you can't interrogate that. I could do some kind of disgusting javascript lookup for the TEXT against the options in the original form, but that seems like not what MDB would have intended...