Topic: Add Material select on click event through jquery
niru-designer free asked 6 years ago
I have purchase mdb3.
I have try to add select box on click through jquery. But I face some trouble it is getting add but it takes display none. hear is my code.
<div class="input-field col-md-4">
<select class="mdb-select">
<option value='' disabled selected>Type</option>
<option value='case'>Case</option>
<option value='Cheque'>Cheque</option>
<option value='card'>Card</option>
<option value='Via Drlogy'>Via Drlogy</option>
</select>
</div>
<i class="material-icons add-icon">add_circle_outline</i>
<span>Add More</span>
js........
$('.mdb-select').material_select();
$(".add-pay-mode").click(function(){
$(".add-pay-input").append("<select class='add-caret initialized'><option value='' disabled selected>Type</option><option value='case'>Case</option><option value='Cheque'>Cheque</option><option value='card'>Card</option><option value='Via Drlogy'>Via Drlogy</option></select>");
});
When user click on add-more link the select must add with same options.
Please Help me out
Thanks a lot
Niranjan
Add comment
Rafał Rogulski free answered 6 years ago
Hi,
Your code has couple issues. Javascript is executed line by line, that's mean that you try to initialize material select wich don't exist yet.
Next, you adding new material select without initializing it.
Correct code:
`$('.add-pay-mode').on('click', function() {
$('.add-pay-input').append('<select class="mdb-select add-caret initialized"><option value="" disabled selected>Type</option><option value="case">Case</option><option value="Cheque">Cheque</option><option value="card">Card</option><option value="Via Drlogy">Via Drlogy</option></select>');
$('.mdb-select').material_select();
$('.add-caret').removeClass('mdb-select');
});`
On this code, wi adding event listener to button with class
.add-pay-mode
, when a button is clicked we adding clear material select code, and initialize it, at the and we remove class .mdb-select
, now this select is initialized and can't again initialize on button click
Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No