Jquery 分别修改select2下拉列表位置

Jquery 分别修改select2下拉列表位置,jquery,html,css,jquery-select2,Jquery,Html,Css,Jquery Select2,我对select2下拉列表有点问题。我希望第一个输入的下拉位置直接放在占位符和最后一行输入的项目下。我尝试了这个功能: function selectReposition() { var placeholderOffset = $("#first-select2 .select2- search__field").position(); var newPosition = placeholderOffset.top - 104; $(".select2-dropdown").css(

我对select2下拉列表有点问题。我希望第一个输入的下拉位置直接放在占位符和最后一行输入的项目下。我尝试了这个功能:

function selectReposition() {
  var placeholderOffset = $("#first-select2 .select2- search__field").position();
  var newPosition = placeholderOffset.top - 104;
  $(".select2-dropdown").css({"top": newPosition + "px"});
}
然而,它弄乱了第一个和第二个输入的下拉列表

我的问题是如何仅重新定位第一个下拉列表?我找不到id或任何东西来区分从第一个或第二个输入启动的下拉列表

还有,我的另一个问题是,我能把输入的标签放在输入框的右边吗?因此,输入字段在左侧保持不变

谢谢你,谢谢你的帮助!:)

$(文档).ready(函数(){
$(“.js示例基本倍数”)。选择2({
占位符:“选择项目”
}).on(‘变更’,功能(e){
if($(this.val()&&&$(this.val().length){
$(this).next('.select2 container').find('li.select2-search--inline input.select2-search_ufield').attr('placeholder','Select items');
}
});
$(“#tag input.js example basic multiple”)。选择2({
占位符:“添加标签”
}).on(‘变更’,功能(e){
if($(this.val()&&&$(this.val().length){
$(this).next('.select2 container').find('li.select2-search--inline input.select2-search_ufield').attr('placeholder','Add tag');
}
});
});
。选择2个选项{
高度:36px!重要;
字体大小:13px;
字体系列:“开放式Sans”,无衬线;
边界半径:0!重要;
边框:实心1px#d1d1!重要;
左侧填充:4px;
}
.选择2个选项--多个{
高度:160px!重要;
}
.选择2-选择\选择\删除{
浮动:对;
右边距:0;
左边距:2倍;
}
.选择2-选择\u选择{
高度:40px;
线高:40px;
右边填充:12px!重要;
左侧填充:16px!重要;
背景色:#D0F3FF!重要;
颜色:#333!重要;
边界:没有!重要;
边界半径:3px!重要;
}
.select2-search--inline.select2-search\u字段{
线高:40px;
颜色:#333;
宽度:88px!重要;
}
.选择2个容器{
}
.选择2容器:悬停,
.选择2容器:焦点,
.选择2容器:活动,
.选择2选择:悬停,
.选择2选择:焦点,
.选择2选择:活动{
轮廓颜色:透明;
轮廓样式:无;
}
.选择2-results\u选项li{
显示:块;
}
.选择2-选择{
变换:translateY(2px);
}
.选择2-选择箭头{
显示:无;
}
。选择2-results\u选项--突出显示{
背景色:#D0F3FF!重要;
颜色:#333!重要;
}
.选择2-选择\选择\删除{
左边距:16像素;
字体大小:16px;
}
.选择2下拉列表{
边界半径:0!重要;
盒子阴影:0px 3px 6px 0 rgba(0,0,0,0.15)!重要;
边界:没有!重要;
利润上限:4倍!重要;
}
.选择2-results\u选项{
字体系列:“开放式Sans”,无衬线;
字体大小:13px;
线高:24px!重要;
垂直对齐:中间!重要;
左侧填充:8px!重要;
}
.可选择的下拉列表{
显示:块;
高度:36px;
线高:36px!重要;
右边填充:0;
左侧填充:16px;
光标:指针;
}
.可选择悬停{
背景色:#D0F3FF;
}
.select2-results\u选项[aria selected=“true”]{
背景色:#f1f1!重要;
}
。选择2-搜索\字段{
字体系列:“开放式Sans”,无衬线;
颜色:#333;
字体大小:13px;
左侧填充:8px!重要;
边框颜色:#d1d1!重要;
}
.选择2-selection\u占位符{
颜色:#d1d1!重要;
}
.form unit。选择2容器,.form unit。选择2选项{
宽度:412px!重要;
}
#标记输入。选择2选择--多个{
边界:没有!重要;
高度:自动!重要;
填充:0!重要;
}
#标记输入。选择2-选择{
填充:0!重要;
}
#标记输入。选择2-搜索字段{
高度:32px;
边界半径:16px;
背景色:#D0F3FF;
边界:没有!重要;
左侧填充:16px!重要;
右边填充:16px;
宽度:104px!重要;
}
#标记输入。选择2-搜索字段::占位符{
颜色:#aaa;
}
#标记输入。选择2-搜索字段:焦点{
边框:实心1px#00c983!重要;
背景色:#fff;
}
#标记输入。选择2-搜索\字段:焦点::占位符{
颜色:#d1d1;
}
#标记输入。选择2-选择\u选择{
高度:32px;
线高:32px;
边界半径:16px!重要;
}
.表格{
边缘底部:40px;
保证金:0自动;
宽度:1302px;
字体系列:“开放式Sans”,无衬线;
}
.表格行{
显示:块;
宽度:100%;
边距:0 32px 0!重要;
}
.表格分开{
显示:内联块;
}
.表格左分{
右边距:32px;
}
.表格右分{
左边距:-4px;
宽度:412px;
}
.表格输入标签{
显示:块;
字体大小:12px;
字号:700;
边缘底部:8px;
颜色:#333;
}
.表格单位{
位置:相对位置;
垂直对齐:顶部;
}

药盒
项目A1
项目A2
项目B1
项目C1
项目C2
项目C3
标签输入
项目A1
项目A2
项目B1
项目C1
项目C2
项目C3