首先单击 selectpicker 的最后选择的选项将不起作用答案

【问题标题】：First click on last selected option of selectpicker won't work首先单击 selectpicker 的最后选择的选项将不起作用
【发布时间】：2019-07-24 11:04:12
【问题描述】：

嗯，我从几天前就一直遇到这个问题，我真的无法找到解决方案。问题是，每当我想首先单击我的 selectpicker 选择的最后一个选定选项时，什么都不会发生。它仅在我第二次选择/单击它时发生，前提是我已经在内部菜单中并选择了上一个选项。此外，当我第一次单击最后一个选项时，jquery 让背景自行显示，没有任何反应。在这种情况下，它应该删除它，因此转到其余选项所在的索引，显示用户选择的选项。

我尝试选择选择选项的最后一项以尝试在每次单击时传递 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;
    }
});

我期望的是，每当您进入菜单并首先单击最后一个选择的选项时，它将直接出现在我将值传递到的输入上，因此会出现在我正在显示所选值的第一个列表中.

【问题讨论】：

能否请您从浏览器中复制生成的 Dom 以便我们调试代码
我正在使用 selectpicker 的 Generated Dom 编辑初始帖子。

标签： jquery html css bootstrap-selectpicker

【解决方案1】：

最后，在我做了一些研究之后，这很容易。在 foreach 循环中，我必须删除标签上的选定选项，它实际上选择了最后一个选项，因此它阻止了选择的选项出现在我的初始菜单上。

foreach ($treatments AS $k => $s) {
        echo "<option class='color_a' value='$k'>$s</option>";
}

【讨论】：