jquery - 如果我的 html 文件中有超过 1 个 select2，如何更改特定 select2 的宽度？

Question

我的 HTML 文件中有超过 1 个 select2。我想为特定的 select2 设置一个宽度，为所有其他 select2 设置一个通用宽度。公共(public)宽度会影响所有选择的宽度，即使我试图通过 jquery 覆盖宽度也不会发生。

CSS

.select2-container {
    width: 100% !important;
}

HTML

<div class="col-md-12">
    <select class="select2 form-control m-t-15"  id="user_name">
        <option selected="selected">Select Name</option>
    </select>
    <select class="select2 form-control m-t-15"  id="user_roll">
        <option selected="selected">Select Roll</option>
    </select>
    <select class="select2 form-control m-t-15"  id="user_address">
        <option selected="selected">Select Address</option>
    </select>
</div>

JQUERY

    $(".select2").select2();
    $("#user_address").select2({ width: '50%' });

预期结果:- 选择 id“user_address”的 2 个宽度应为 50%。

当前结果:- 所有选择 2 的宽度都是 100%

有人知道如何将 50% 宽度设置为 id“user_address”的 select2 吗？

Answer 1

您已经为每个 select2 指定了 id 因此，您可以使用其 id 设置特定 select2 的样式 对于 ex 让我们设置“user_roll”的样式:

#user_roll{
//your styling here, noting that "#" is for the id just like the "." is for class
  }