第一次点击 selectpicker 的最后选择的选项将不起作用
First click on last selected option of selectpicker won't work
好吧,我从几天前就一直遇到这个问题,我真的无法找到解决方案。
问题是,每当我想首先单击 select 选择器 select 的最后一个 selected 选项时,什么都不会发生。
它只发生在我第二次 select/click 它的时候,前提是我已经在内部菜单中并且 select 编辑了上一个选项。
此外,我第一次单击最后一个选项时,jquery 会让背景自行显示,但什么也没有发生。在这种情况下,它应该删除它,因此转到其余选项所在的索引,显示用户的 selected 选项。
我已经尝试 selecting select 选项的最后一项以尝试在每次单击它时传递一个 onchange 事件,但不幸的是我没能这样做。
我也一直在检查 CSS 规则,无论如何都有一些东西用它的填充、边距或 z-index 阻止了这个选项,但它不是那种东西。
<!--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;
}
});
我期望的是,每当您进入菜单并首先单击最后一个 selected 选项时,它将直接出现在我将值传递给的输入中,因此出现在中的第一个列表中我正在显示 selected 值。
最后,我做了一些研究,这是一件很容易的事情。
在 foreach 循环中,我不得不删除标签上的选定选项,
它实际上选择了最后一个选项,因此它阻止了所选选项出现在我的初始菜单上。
foreach ($treatments AS $k => $s) {
echo "<option class='color_a' value='$k'>$s</option>";
}
好吧,我从几天前就一直遇到这个问题,我真的无法找到解决方案。 问题是,每当我想首先单击 select 选择器 select 的最后一个 selected 选项时,什么都不会发生。 它只发生在我第二次 select/click 它的时候,前提是我已经在内部菜单中并且 select 编辑了上一个选项。 此外,我第一次单击最后一个选项时,jquery 会让背景自行显示,但什么也没有发生。在这种情况下,它应该删除它,因此转到其余选项所在的索引,显示用户的 selected 选项。
我已经尝试 selecting select 选项的最后一项以尝试在每次单击它时传递一个 onchange 事件,但不幸的是我没能这样做。 我也一直在检查 CSS 规则,无论如何都有一些东西用它的填充、边距或 z-index 阻止了这个选项,但它不是那种东西。
<!--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;
}
});
我期望的是,每当您进入菜单并首先单击最后一个 selected 选项时,它将直接出现在我将值传递给的输入中,因此出现在中的第一个列表中我正在显示 selected 值。
最后,我做了一些研究,这是一件很容易的事情。 在 foreach 循环中,我不得不删除标签上的选定选项, 它实际上选择了最后一个选项,因此它阻止了所选选项出现在我的初始菜单上。
foreach ($treatments AS $k => $s) {
echo "<option class='color_a' value='$k'>$s</option>";
}