Issue using multiple 'Select with a label and search bo


Topic: Issue using multiple 'Select with a label and search box'

trabuiansRCC asked 5 years ago

Expected behavior Use multiple 'Select with a label and search box'

Actual behavior When using Multiple select's the dropdown's do not work for all of them. Once I select an item the other selects will not allow me to select them.

Resources (screenshots, code snippets etc.) I am using MDBPro for my project. I have the javascript in script tags after the closing tag. And my tags with in the

Screenshot of error

Below is the HTML and the javascript.

▼ Search employee John Smith Sarah Murphy Sam Smith Harry Potter Fred Flinstone Search employee John Smith Sarah Murphy Sam Smith Harry Potter Fred Flinstone
                                          <label class="mdb-main-label">Employee Name</label>
                            </div>
▼ Search employee John Smith Sarah Murphy Sam Smith Harry Potter Fred Flinstone Search employee John Smith Sarah Murphy Sam Smith Harry Potter Fred Flinstone
                                          <label class="mdb-main-label">Employee Name</label>
                            </div>
▼ Search employee John Smith Sarah Murphy Sam Smith Harry Potter Fred Flinstone Search employee John Smith Sarah Murphy Sam Smith Harry Potter Fred Flinstone
                                          <label class="mdb-main-label active">Employee Name</label>
                            </div><div class="col-sm-3 text-left">
                                    <div class="select-wrapper mdb-select md-form"><span class="caret">▼</span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-ba6d3890-4d09-4f1d-b34a-33e1d92b93fb" value=""><ul id="select-options-ba6d3890-4d09-4f1d-b34a-33e1d92b93fb" class="dropdown-content select-dropdown w-100 "><span class="search-wrap ml-2"><div class="md-form mt-0"><input type="text" class="search form-control w-100 d-block" placeholder="Search here.."></div></span><li class="disabled   "><span class="filtrable"> Search employee   </span></li><li class="   "><span class="filtrable"> John Smith   </span></li><li class="   "><span class="filtrable"> Sarah Murphy   </span></li><li class="   "><span class="filtrable"> Sam Smith   </span></li><li class="   "><span class="filtrable"> Harry Potter   </span></li><li class="   "><span class="filtrable"> Fred Flinstone   </span></li></ul><select class="mdb-select md-form initialized" searchable="Search here..">
                                            <option value="" disabled="" selected="">Search employee</option>
                                            <option value="1">John Smith</option>
                                            <option value="2">Sarah Murphy</option>
                                            <option value="3">Sam Smith</option>
                                            <option value="3">Harry Potter</option>
                                            <option value="3">Fred Flinstone</option>
                                          </select></div>
                                          <label class="mdb-main-label">Employee Name</label>
                            </div>
                        </div>

Javascript: $(document).ready(function() { // Material Select Initialization $('.mdb-select').materialSelect();

    $(".list-group-item").hover(function(){
        $(this).find("i").first().toggleClass("notclicked");
    });

    oldVals = new Array(3);

});

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: Web browser
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No