Topic: mdb-select
If you dont know the sequence in the list that your desired item will appear you can do this instead:$('.select-dropdown li:contains("op2")').trigger('click');
Maincoke commented 7 years ago
Awesome solution! I had a select with Jquery! And this code got me a lot of help! Thanks!
I've found this solution to work fine
$('#mySelect option[value="optionValue"]').attr("selected", true);
mdb select not working properly when I select a value by default option selected that time option value and label overlap. please help
If you have an on-change event on your select and you need to set the value inside there (like to revert the value back or something), the proposed solution here will put you in an infinite loop, as the trigger('click') will put you inside your change event.Consider the following:
<select class="mdb-select" id="selectList" onchange="change_handler();">
<option value="" disabled selected>Choose your option</option>
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
</select>
You can do:
<script>
function change_handler() {
// You have to set the value of the selectList also.
// Or, when you open the mdb-select again it will trigger change
$('#selectList").val('op2');
$('.mdb-select input).val('Option 2');
}
</script>
<select class="mdb-select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Example label</label>
<button id="update">Update Option</button><script>
$(document).ready(function() {
// Initialize Material Select
$('.mdb-select').material_select();
});
$('#update').on('click', function() {
// This will select 2nd option
$('.select-dropdown li:eq( 2 )').trigger('click');
});
</script>Jorge Nuñez Malledo commented 6 years ago
This works nicely when you have only one . Could you please provide an example of selecting 2nd option of a specific select? It seems that "$('.select-dropdown li:eq( 2 )')" selector doesn't refers to a particular id.
Beedge pro commented 7 years ago
$('.select-dropdown li:contains("Option 2")').trigger('click');
<select class="mdb-select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Example label</label<script>
$(document).ready(function() {
// Initialize Material Select
$('.mdb-select').material_select();
});
$('#update').on('click', function() {
// This will select 2nd option
$('.select-dropdown li:eq( 2 )').trigger('click');
});
</script><select class="mdb-select">
<option value="" disabled selected>Choose your option</option>
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
</select>
<label>Example label</label$('.select-dropdown li:eq(op2)').trigger('click');
$('.select-dropdown li:eq(op2)').trigger('click'); because it isn't valid use of eq. If you want to use this solution to select an item you must put a number in it (0-first option, 1-second one .... etc.).
Regards,
Adrian
Dear @Akhi joe
You can find documentation for MDB Angular select here:
https://mdbootstrap.com/docs/angular/forms/select/
If the information available there is insufficient for your use case, please provide more details about the problem.
We have special category for the questions related to Angular. It would be better to create new thread there in case of any further problems with MDB Angular components.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No