设置 select2输入的宽度(通过 Angular-ui 指令)

小开

最佳答案

您需要指定要解析的属性宽度，以便保留元素宽度

$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});

小开

设置宽度“解决”不适合我。相反，我将“ width: 100%”添加到我的选择中，并像下面这样修改 css:

.select2-offscreen {position: fixed !important;}

这是唯一适合我的解决方案(我的版本是2.2.1) 您的选择将采取所有可用的地方，它比使用

class="input-medium"

由于 select 始终保留在容器中，即使在调整窗口大小(响应)之后也是如此

小开

在我的例子中，如果有零片或更多片，则 select2将正确打开。

但如果有一个或多个药片，我删除了它们，它会缩小到最小的宽度。我的解决办法很简单:

$("#myselect").select2({ width: '100%' });

小开

在脚本中添加方法容器 css，如下所示:

$("#your_select_id").select2({
containerCss : {"display":"block"}
});

它将设置您选择的宽度与您的 div 的宽度相同。

小开

这是一个老问题，但新的信息仍然值得张贴..。

从 Select2版本3.4.0开始，有一个属性 dropdownAutoWidth可以解决这个问题并处理所有奇怪的情况。注意，默认情况下它不是打开的。它会随着用户的选择而动态调整大小，如果使用了 allowClear属性，它会增加该属性的宽度，并且它还会正确地处理占位符文本。

$("#some_select_id").select2({
dropdownAutoWidth : true
});

小开

Select2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>

小开

使用 > 4.0的 select2

$("select").select2({
dropdownAutoWidth: true
});

其他这些方法都不起作用:

类: ‘ bigdrop’
宽度: 「100% 」
宽度: “解决”

小开

你可以试试这样，对我很有效

$("#MISSION_ID").select2();

对于 hide/show 或 ajax 请求，我们必须重新初始化 select2插件

例如:

$("#offialNumberArea").show();
$("#eventNameArea").hide();


$('.selectCriteria').change(function(){
var thisVal = $(this).val();
if(thisVal == 'sailor'){
$("#offialNumberArea").show();
$("#eventNameArea").hide();
}
else
{
$("#offialNumberArea").hide();
$("#eventNameArea").show();
$("#MISSION_ID").select2();
}
});

小开

独立于 select2的更容易的 CSS 解决方案

//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />


//CSS
.input-xxsm {
width: 40px!important; //for 2 digits
}


.input-xsm {
width: 60px!important; //for 4 digits
}


.input-sm {
width: 100px!important; //for short options
}


.input-md {
width: 160px!important; //for medium long options
}


.input-lg {
width: 220px!important; //for long options
}


.input-xlg {
width: 300px!important; //for very long options
}


.input-xxlg {
width: 100%!important; //100% of parent
}

小开

向 select2函数添加宽度解析选项

$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});

在将下面的 CSS 添加到样式表之后

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

这会解决问题的

小开

在最近的一个使用 鞋带4构建的项目中，我尝试了上面所有的方法，但没有一个奏效。我的方法是通过编辑 图书馆 CSS使用 JQuery得到 百分百确定表。

 // * Select2 4.0.7


$('.select2-multiple').select2({
// theme: 'bootstrap4', //Doesn't work
// width:'100%', //Doesn't work
width: 'resolve'
});


//The Fix
$('.select2-w-100').parent().find('span')
.removeClass('select2-container')
.css("width", "100%")
.css("flex-grow", "1")
.css("box-sizing", "border-box")
.css("display", "inline-block")
.css("margin", "0")
.css("position", "relative")
.css("vertical-align", "middle")

工作演示

$('.select2-multiple').select2({
// theme: 'bootstrap4', //Doesn't work
// width:'100%',//Doens't work
width: 'resolve'
});
//Fix the above style width:100%
$('.select2-w-100').parent().find('span')
.removeClass('select2-container')
.css("width", "100%")
.css("flex-grow", "1")
.css("box-sizing", "border-box")
.css("display", "inline-block")
.css("margin", "0")
.css("position", "relative")
.css("vertical-align", "middle")

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />


<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col" class="w-50">#</th>
<th scope="col" class="w-50">Trade Zones</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
multiple="multiple">
<option value="1">One</option>
<option value="1">Two</option>
<option value="1">Three</option>
<option value="1">Okay</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

小开

我也想在这里加上我的答案，这和拉文杜上面的答案很相似。

我在 select2中添加了 width: 'resolve',作为属性:

    $('#searchFilter').select2({
width: 'resolve',
});

然后，我用 !important向 select2-container添加了一个 min-width属性:

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

在 select 元素上，style='100px !important;'属性需要 !important才能工作:

<select class="form-control" style="width: 160px;" id="searchFilter" name="searchfilter[]">

小开

在样式表中添加以下内容:

.select2 {
width: unset !important;
}

小开

另一种方法是在 Select 标记上设置样式的宽度。

<select id="myselect" style="width: 20%;">
<option>...</option>
</select>

那就用这个

$(document).ready(function() {
$("#myselect").select2({ width: 'style' }); //This will use style attr of the select element
});

小开

这是我的工作。在创建选择组件，然后添加您的客户 CSS 属性。

$(select).select2({
//....create select componant content
});


$("span.select2-container").addClass(yourDefClass);

在 css 文件中。配置您的样式并添加。

.yourDefClass{
width: 700px !important;
}