mdb-select: use js to select item by value

Topic: mdb-select: use js to select item by value

lengyuan free asked 6 years ago

Hi TeamMay I know how to use js to select a specific item by value?For example, I have a dropdown like below. I would like to auto-select language based on user cookie, which stored the language code (nl for example)

<div class="form-group"><label>Translation Language</label>
    <select id="tranlan" name="tranlan" class="mdb-select">
        <option value="en">English</option>
        <option value="ar">Arabic</option>
        <option value="bg">Bulgarian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="he">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hu">Hungarian</option>
        <option value="id">Indonesian</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="ko">Korean</option>
        <option value="ms">Malay</option>
        <option value="no">Norwegian</option>
        <option value="pl">Polish</option>
        <option value="pt">Portuguese</option>
        <option value="ro">Romanian</option>
        <option value="ru">Russian</option>
        <option value="sk">Slovak</option>
        <option value="sl">Slovenian</option>
        <option value="es">Spanish</option>
        <option value="sv">Swedish</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="vi">Vietnamese</option>
    </select>
</div>

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi there lengyuan,
Thanks for reaching out through our forum! The task at hand is rather tricky, since what you see here as <code></code> elements are not what is available for choosing in the browser. Our <code>material select</code>'s script takes the <code></code> and hides it from sight (as in <code>display: none!important</code>) so it can revived it with in its splendid material design features. As you can see for yourself in DevTools, the <code></code>s are rendered anew as an plain <code>li</code> elements. As such they can be accessed with 
<code> 
$('.dropdown-content li').on('click', function() { 
 let value = $(this)[0].firstChild.outerText; 
 console.log(value); 
 }); 
</code> 
The only downturn here is that <code></code> loose their attributes during the conversion, but it's nothing a simple language code matching utility couldn't handle. Hope it helps.
With Best Regards, 
Kuba

Please insert min. 20 characters.

Hi there lengyuan,

Thanks for reaching out through our forum! The task at hand is rather tricky, since what you see here as elements are not what is available for choosing in the browser. Our material select's script takes the and hides it from sight (as in display: none!important) so it can revived it with in its splendid material design features. As you can see for yourself in DevTools, the s are rendered anew as an plain li elements. As such they can be accessed with
$('.dropdown-content li').on('click', function() { let value = $(this)[0].firstChild.outerText; console.log(value); });
The only downturn here is that loose their attributes during the conversion, but it's nothing a simple language code matching utility couldn't handle. Hope it helps.

With Best Regards,
Kuba

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: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

lengyuan

0Support score
1Questions 0Answers 0Snippets