How to read value from mdb-select

Topic: How to read value from mdb-select

Tomasz Kisielewski free 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 free 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 free answered 5 years ago

0 0 Best answer

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

Grzegorz Bujański free commented 5 years ago

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

Add comment

Tomasz Kisielewski free answered 5 years ago

0 0 Best answer

<p>Version 4.13.0<br>
For this code works good</p>

<pre class="prettyprint"><code><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'
    }
});
</code></pre>

<p>but if you set placeholder</p>

<pre class="prettyprint"><code>$('.mdb-select').materialSelect({
    validate: true,
    visibleOptions:-1,
    placeholder:'bla bla bla',
    labels: {
      noSearchResults:'Nie znaleziono', 
      validFeedback: 'Correct choice',
      invalidFeedback: 'Wrong choice'
    }
});
</code></pre>

<p>is not working properly<br>
USA  returns null<br>
Germany nothing ( space ?)<br>
France 11<br>
Poland 21 etc<br></p>

<p>Additional  mdb-main-label looks bad. 
it's a bit low</p>

Please insert min. 20 characters.

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

Write

Create snippet

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.10.0
Device: PC
Browser: Firefox
OS: Windows 10
Provided sample code: No
Provided link: No

Tomasz Kisielewski

25Support score
1Questions 2Answers 0Snippets