Topic: mdb-select: use js to select item by value
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>
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No