Topic: Add Material select on click event through jquery

niru-designer free asked 5 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

Rafał Rogulski free answered 5 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

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No