Метка кнопки onChange не имеет своего стиля

Question

У меня интересная проблема.У меня есть кнопка, которая используется для выбора (например, пункт выбора).Этот код здесь:

<button class="btn btn-primary dropdown-toggle" style="width: 166%;" 
        type="button" id="dropdownMenuButton" data-toggle="dropdown" 
        aria-haspopup="true" aria-expanded="false">
   <span id="dropdown_button" style="width: 166%;">
     <img src="wp-content/themes/directory2/images/closest.png" />
          10 Closest Amenities</span>
   <span class="caret" style="margin-top: 9px;float: right;"></span>
</button>

Затем он использует некоторый jquery для изменения текста в кнопке / выбора следующим образом:

$(document).on('click', '.dropdown_anchor', function(event) {
    var index = $(this).data('index');
    var title = $(this).data('title');
    populate_list(index);
    dropdownButtonText(title);
});

Затем функция dropdownButtonText реализуется следующим образом:

function dropdownButtonText(text) {
    $("#dropdown_button").text(text);
}

Проблема заключается в том, что кнопка охватывает необходимую ей ширину при загрузке страницы (также известную как style="width: 166%;"), но когда выбор происходит и его изменяют, кнопка не сохраняет установленную ширину.Например, с 166% до 87% ширины.

Как сделать так, чтобы при изменении кнопки ширина сохранялась?

Спасибо за ваш ввод и время, этоприветствуется.

Пример можно увидеть здесь: https://www.trustedlivingcare.com/item/cedarhurst-of-sparta-il/

Район района и ближайших удобств

Начальная позиция https://www.screencast.com/t/TiuWZdhYcWc

После изменения https://www.screencast.com/t/goYgVtvrErW5

Answer 1

Ниже того, что я пробовал.

<div class="dropdown">
    <button id="btnTest" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="width: 80%;">Dropdown Example
    <span class="caret"></span></button>
    <ul id="demolist" class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>
<script type="text/javascript">
$('#btnTest').click(function() {
   console.log("Test");
});
$('#demolist li').on('click', function(){
    var selectedText = $(this).text();
    console.log(selectedText);
    $("#btnTest").html(selectedText+'&nbsp;&nbsp;<span class="caret"></span></button>');
});
</script>

Кроме того, обратитесь к демонстрации в с помощью переключателя выпадающего меню Bootstrap 3

Answer 2

Это происходит потому, что ширина кнопки изменяется, когда в тексте меньше символов, чем в предыдущем. Вы можете присвоить кнопке определенную ширину в css, чтобы она не менялась при изменении текста.

#dropdown_button {
width: 100px; // this is an example
}

Вы также можете сделать минимальную ширину, чтобы убедиться, что ширина кнопки наименьшая.

#dropdown_button {
    min-width: 100px; // this is an example
    }

Answer 3

попробуйте это в вашем файле CSS

.btn-primary {
   min-width: 500px;
 }

Answer 4

Вы можете попробовать получить ширину элементов до изменения текста:

 $(document).on('click', '.dropdown_anchor', function(event) {
          var index = $(this).data('index');
          var title = $(this).data('title');
          var width = $(this).outerWidth();
          populate_list(index);
          dropdownButtonText(title, width);
      });

, а затем примените эту ширину в новой функции.

 function dropdownButtonText(text, width) {
    $("#dropdown_button").css("width", width).text(text);
  }

Кнопка должна отображаться как inline-block.