Topic: obtaining option value via javascript with select

erikmjacobs free asked 5 years ago


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...


MDBootstrap staff answered 5 years ago


Hi erikmjacobs,

You are right that

<select class="mdb-select md-form initialized" searchable="Search here..">
         ...
</select>

is a void element that is used only during initialization. After the js code is used to initialize material select we are working with a new dom object. The example I created in the support ticket you refer too is probably one of the best ways to get the value without changing something to material select. You can always check it our multi-select helps you achieve your development needs.

If you need additional help I am here for you.

Best Regards, Piotr



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.1
  • Device: laptop
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: Yes
  • Provided link: Yes