In the code I provided, you can see at the bottom that each option has a value (5, 6, 7, 8, 9). When the item is clicked, I need to push the value from the select option into the database with an update. I was trying to use onClick on the option which didn't work, of course, because the option is hidden and isn't being clicked. I will try to switch it to onChange on the option to trigger the ajax data push. In the code you gave me, the $(this) object is clearly the li object which hasn't got the value attached to it. I will try the onChange later today and report back.

---

Could you explain more precisely what's the problem?

---

OK - that gets me to the li but that has overwritten the option that has a value. How can I tie back to the value of the selected item to use it in the javascript? The code below is the rendering of the multiple select dropdown and I can't reall see a what to link FOS / Network in the li back to the option value attached in the corresponding select. I suppose I could do this with a counter on the $("ul").next(), but it seems a bit clunky to do that traversing. Am I missing something here? `' ' <div> <label>MyContext</label> <div class="select-wrapper mdb-select"> <span class="caret">?</span> <input type="text" class="select-dropdown active" readonly="true" data-activates="select-options-91972e85-eb57-d103-3f27-c9e7b84aff65" value="Choose Context"> <ul id="select-options-91972e85-eb57-d103-3f27-c9e7b84aff65" class="dropdown-content select-dropdown multiple-select-dropdown active" style="width: 1033px; position: absolute; top: 0px; left: 0px; opacity: 1; display: block;" > <li class="disabled"> <span> <input type="checkbox" disabled=""/> <label> </label>Choose Context </span> <li class="active"> <span> <input type="checkbox"/> <label></label>Classroom </span> <li class=""> <span> <input type="checkbox"/> <label></label>School </span> <li class=""> <span> <input type="checkbox"/> <label></label>FOS / Network </span> <li class=""> <span> <input type="checkbox"/> <label></label>Board </span> <li class=""> <span> <input type="checkbox"/> <label></label>Region / Province </span> <select class="mdb-select initialized" multiple="" id="ddContext"> <option value="" disabled="" selected="">Choose Context</option> <option value="5">Classroom</option> <option value="6">School</option> <option value="7">FOS / Network</option> <option value="8">Board</option> <option value="9">Region / Province</option> </select> </div> </div>

---

Hi, try to use our solution below - hope that it will give you the result that you expected to get. $('.mdb-select').material_select(); $('.mdb-select li').on("click", function() { alert('something'); });

---