Jquery 如何将浮动标签应用于select2下拉列表?
我正在使用select2插件来选择下拉列表。我在页面中有多个选择下拉框,我需要将浮动标签应用于所选下拉框 我试过了,在谷歌上搜索过,但没有找到我所期望的结果 我已经提供了迄今为止我尝试过的代码 HTMLJquery 如何将浮动标签应用于select2下拉列表?,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我正在使用select2插件来选择下拉列表。我在页面中有多个选择下拉框,我需要将浮动标签应用于所选下拉框 我试过了,在谷歌上搜索过,但没有找到我所期望的结果 我已经提供了迄今为止我尝试过的代码 HTML <div class="container"> <div class="row"> <div class="col-md-6 col-lg-6 col-sm-6"> <label class="hor-menu visible-x
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-6 col-sm-6">
<label class="hor-menu visible-xs visible-xs control-label col-sm-1"></label>
<div class="form-group form-md-line-input form-md-floating-label" style="margin-top: 13px;">
<select name="cboNGrp" id="cboNGrp" class="form-control select2me input-xlarge" data-live-search="true" data-size="8"></select>
<label class="form_control_1 head_ctrl_label" style="padding-top: 2px;">Type</label>
</div>
</div>
<div class="col-md-6 col-lg-6 col-sm-6">
<div class="form-group form-md-line-input head_ctrl">
<label class="hor-menu visible-xs visible-xs control-label col-sm-1"></label>
<select name="cboEmrGrp" id="cboEmrGrp" class="select2me form-control input-xlarge"></select>
<label class="form_control_1 head_ctrl_label">E / M</label>
</div>
</div>
</div>
</div>
尝试以下方法
$('.select2me').click(function(e){
if($(this).find('select2-dropdown-open')) {
$(this).next('.head_ctrl_label').css('margin-top', '-25px'); }
e.preventDefault();
});
希望这对你有帮助
$('select').select2().on('select2:open', (elm) => {
const targetLabel = $(elm.target).prev('label');
targetLabel.addClass('selected');
}).on('select2:close', (elm) => {
const target = $(elm.target);
const targetLabel = target.prev('label');
const targetOptions = $(elm.target.selectedOptions);
if (targetOptions.length === 0) {
targetLabel.removeClass('selected');
}
});
SCSS
上面的JS代码有效,但适用于页面中的所有选择框。我需要将代码应用到用户选择的当前选择框。使用您的代码创建一个提琴使用$('select2-dropdown-open.head\u ctrl\u label').css('margin-top','-25px');在jsNo中,$('select2-dropdown-open.head\u ctrl\u label').css('margin-top','-25px');不起作用。@sravs,JS代码起作用,但当我试图选择一个下拉列表时,对所有选择下拉列表应用-25边距。请检查我所附的图片。请解释您的答案。@Maavin先生,请参阅上面的链接。代码笔链接@这不是一个解释。它只提供了一个完整的例子。有一个完整的例子也很好,但也许你可以解释一下你是如何解决这个问题的,以及为什么。@Maavin先生,“sravs”提供的答案已经被接受了。我希望当
select2
打开和关闭时,“MrMaavin”代码将所选的
类应用于标签
。这个答案实际上对我有用
$('select').select2().on('select2:open', (elm) => {
const targetLabel = $(elm.target).prev('label');
targetLabel.addClass('selected');
}).on('select2:close', (elm) => {
const target = $(elm.target);
const targetLabel = target.prev('label');
const targetOptions = $(elm.target.selectedOptions);
if (targetOptions.length === 0) {
targetLabel.removeClass('selected');
}
});
label {
&.selected {
top: 0;
font-size: 11px;
transform: translateY(0);
}
font-size: 16px;
color: #dfdfdf;
position: absolute;
z-index: 1;
top: 50%;
left: 15px;
transform: translateY(-50%);
transition: all 0.2s ease 0s;
}