javascript - onChange Button标签不保留其样式

我有一个有趣的问题。我有一个用于选择的按钮（如选择项）。该代码在这里：

<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

最佳答案

这是因为当文本的字符少于上一个字符时，按钮的宽度会发生变化。您可以在CSS中为按钮指定特定的宽度，以便在文本更改时按钮不会更改。

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

您还可以执行最小宽度以确保该最小宽度是按钮所经过的宽度。

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

关于javascript - onChange Button标签不保留其样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55954449/