Well, I have been currently having this problem since a few days ago and I can't really come to a solution. The thing is that whenever I want to firstly click on the last selected option of my selectpicker select, nothing won't happen. It only happens on the second time that I select/click it, with the premise that I am already inside the inner menu and have selected a previous option. Moreover, the first time I click the last option, the jquery lets the background it being displaid by itself and nothing happens. In that case it should remove it and therefore go to the index where the rest of the options are located displaying the selected options from the user.
I have tried selecting the last item of the select options to try to pass an onchange event upon every time it is clicked but unluckily I haven't been able to do so. I have also been checking the CSS rules, in any case there is something that is blocking the option with its paddings, margins or z-index but it is nothing of the sort.
<!--TEMPLATE FOR THE SELECT LIST-->
<section class="top_margin_xs">
<a class="block" data-toggle="modal"
href="#modal_search_treat">
<li class="list-group-item item text-left">
<figure> <i class="td-icon-stethoscope-alt
placeholder_input_ico text-muted_light ico-specialty
color_a" style="font-size: 3.5rem; top: 10px;"></i>
</figure>
<div class="left_margin_md left_padding"
style='display:inline-block; vertical-align: middle;'>
<input id="inputTreatment" type="hidden" class="form-
control" placeholder="" value="" name="treatment"
style="text-indent:30px" />
<span><?= __('Tratamiento'); ?></span>
</div>
</li>
</a>
<div id="modal_search_treat" class="modal fade bg_dark">
<div class="modal-dialog">
<button type="button" class="close pull-left left_margin top_margin" data-dismiss="modal">
<span class="text_light">
<i class='fa fa-2x fa-angle-left'></i>
</span>
</button>
<div class="modal-content">
<div class="modal-body no_padding">
<div id="treatments">
<i id="stethoscope" class="td-icon-stethoscope-alt
ico-specialty color_a ico_placeholder fa-3x top_padding_xs"></i>
<select id="treament" class="selectpicker form-control color_a selespecialidad" data-style="color_a bg_paper"
data-id="treatment"
data-live-search="true"
data-toggle="tooltip">
<?php echo "<optgroup label='Tratamiento:'>";
foreach ($treatments AS $k => $s) {
echo "<option class='color_a' value='$k' selected>$s</option>";
}
echo "</optgroup>"; ?>
</select>
</div>
</div>
</div>
</div>
</div>
</section>
<!--SCRIPT FOR SELECTED OPTIONS-->
$('.selectpicker[data-id="treatment"]').on('change', function() {
especialidad = this.value;
var valTreat = $(this)[0].selectedOptions[0].innerHTML;
var inputTreat = $("input[type=hidden][name=treatment]");
inputTreat.val(valTreat);
inputTreat.next('span').text(valTreat);
var lengthInput = valTreat.length;
if (lengthInput > 18) {
var treatText = inputTreat.next('span').text();
var textElipsisTreat = treatText.substring(0, 18) + '...';
inputTreat.next('span').text(textElipsisTreat);
}
$('#modal_search_treat').modal('toggle');
$('div.modal-backdrop.in').removeClass('modal-backdrop');
if ($('.selectpicker[data-id="treatment"]').val(valTreat)) {
return;
}
});
What I expect is that whenever you enter inside the menu and firstly click the last selected option, it will appear directly on the input which I am passing the value to and therefore to the first list in which I am displaying the selected values.
Finally, it was something quite easy after I did some research. On the foreach loop I had to remove the selected option on the tag, it was actually taking the last option as selected and therefore it was blocking the selected to option to appear on my initial menu.
foreach ($treatments AS $k => $s) {
echo "<option class='color_a' value='$k'>$s</option>";
}