How to read value from mdb-select

Topic: How to read value from mdb-select

Tomasz Kisielewski asked 5 years ago

HTML

 <div class="col-sm-3">
    <select class="mdb-select md-form" searchable="Search here.." id="abc" data-placeholder="aaa" required>
       <option value="" selected disabled>Choose....</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>
    <label class="mdb-main-label">Label example</label>
                        </div>

$('.mdb-select').materialSelect({
    validate: true,
    labels: {
      validFeedback: 'Correct choice',
      invalidFeedback: 'Wrong choice'
    }
});

$('#abc').change(function(e)
{
    e.preventDefault();
    var woj =$('#abc').val();
    alert(woj);
});

Click USA - return null
Click Germany - return null
Click France return 1
Click Poland return 2
???

As like there was a shift of val() by two positions

Grzegorz Bujański staff commented 5 years ago

Hi. Please update MDB to the latest version. I checked this on 4.13.0 and works fine.

Add comment

Tomasz Kisielewski answered 5 years ago

0 0 Best answer

Version 4.13.0
For this code works good

<div class="col-sm-3">
                    <select class="mdb-select md-form colorful-select dropdown-default" searchable="Wyszukaj"  id="abc" required>
   <option value=""></option>
  <option value="11">USA</option>
  <option value="21">Germany</option>
  <option value="31">France</option>
  <option value="41">Poland</option>
  <option value="51">Japan</option>
</select>
<label for="abc">Numer lokalu</label>
                    </div>

$('.mdb-select').materialSelect({
    validate: true,
    visibleOptions:-1,
    labels: {
      noSearchResults:'Nie znaleziono', 
      validFeedback: 'Correct choice',
      invalidFeedback: 'Wrong choice'
    }
});

but if you set placeholder

$('.mdb-select').materialSelect({
    validate: true,
    visibleOptions:-1,
    placeholder:'bla bla bla',
    labels: {
      noSearchResults:'Nie znaleziono', 
      validFeedback: 'Correct choice',
      invalidFeedback: 'Wrong choice'
    }
});

is not working properly
USA returns null
Germany nothing ( space ?)
France 11
Poland 21 etc

Additional mdb-main-label looks bad. it's a bit low

enter image description here

Grzegorz Bujański staff commented 5 years ago

We will fix it. For now you can set placeholder this way: <select class="mdb-select md-form colorful-select dropdown-default" data-placeholder='bla bla bla' searchable="Wyszukaj" id="abc" required>

Add comment

Tomasz Kisielewski answered 5 years ago

0 0 Best answer

This option also does not work - for USA returns empty as a result

Grzegorz Bujański staff commented 5 years ago

Look at here: https://mdbootstrap.com/snippets/jquery/grzegorz-bujanski/1799993

Add comment