Hey everyone!
Currently using Laravel 5 and trying to style the "select" class as "selectpicker".
I'm facing an issue where I want to disable or hide the selected option when clicked, as I'm creating a div with the option's content right below it. If the select option is not disabled or hidden, it keeps creating a new div.
I've been struggling with this for the past couple of days...
<select id="interlocutorsList" name="interlocutorsList" class="selectpicker" data-width="100%" data-style="btn-info select2" data-live-search="true">
<option id="titleSelectInterlocutor" class="" value="" selected>Make a choice</option>
@foreach( $othersInterlocutors as $interlocutor)
<option value="{{$interlocutor->id}}" id="option{{$interlocutor->id}}" class="" style="overflow: hidden; width:100%;" data-tokens="">{{$interlocutor->name.' '.$interlocutor->firstName}}
</option>
@endforeach
</select>
$("#interlocutorsList").change(function () {
$('#titleSelectInterlocutor').addClass("d-none");
var interlocutorSelect=$("#interlocutorsList").val();
$('#option'+interlocutorSelect).addClass("d-none");
var nameSel=interlocutorsTab[interlocutorSelect];
$(".interlocutorSel").append("<div class='row rowSensor"+interlocutorSelect+"'><div class='col-lg-12 mb-1'><p class='d-inline' style='color: #000;'>"+nameSel+"</p><input id='interlocutor"+interlocutorSelect+"' type='hidden' name='interlocutor"+interlocutorSelect+"' value='on'><button type='button' id='btnSup" + interlocutorSelect + "' class='btn btn-outline-info buttonSubmit float-right'>-</button></div></div> ");
});
$(".interlocutorSel").on("click", "button[id^='btnSup']", function () {
var idBtnClick = $(this).attr("id");
var nbCustom = idBtnClick.substring(6);
$('.rowSensor' + nbCustom).remove();
$('#option'+nbCustom).removeClass("d-none");
});