要实现将弹出窗口中选中的内容赋值给文本框,可以通过以下步骤实现:
要实现将弹出窗口中选中的内容赋值给文本框,可以通过以下步骤实现:
- 给选择框添加点击事件,使用jQuery选择器选中选择框,并使用click()事件绑定函数。
$('#selectBox').click(function(){
// 在函数内部编写后续代码
})
- 在函数中,打开弹出窗口,监听选择框内容的点击事件,使用jQuery选择器选中选择框内的所有选项,并使用click()事件绑定函数以获取到被选中的项。
$('#selectBox').click(function(){
// 弹出窗口代码
// 监听选择框内容的点击事件
$('#selections').children('li').click(function(){
// 选中项的值
var selectedValue = $(this).text();
// 赋值给文本框
$('#textbox').val(selectedValue);
});
});
- 在弹出窗口中,给所有选项添加类名,使用jQuery选择器选中所有选项,使用addClass()方法为每个选项添加类名。
<ul id="selections">
<li class="option">选项1</li>
<li class="option">选项2</li>
<li class="option">选项3</li>
</ul>
$('#selections').children('li').addClass('option');
- 在弹出窗口中使用CSS样式隐藏所有选项,在选中的选项上应用不同的样式以便用户能够识别出选中项。
#selections li {
display: none;
}
#selections li.selected {
background-color: #ccc;
}
- 在弹出窗口中监听选择框内容的点击事件,使用addClass()方法为被选中的项添加样式类selected,同时移除其他项的样式类。
$('#selections').children('li').click(function(){
// 移除所有选项的selected类
$('#selections').children('li').removeClass('selected');
// 为选中的项添加selected类
$(this).addClass('selected');
});
示例1:
<input type="text" id="textbox">
<button id="selectBox">选择</button>
$('#selectBox').click(function(){
$('#selections').show();
});
$('#selections').children('li').click(function(){
var selectedValue = $(this).text();
$('#textbox').val(selectedValue);
$('#selections').hide();
});
示例2:
<input type="text" id="textbox">
<button id="selectBox">选择</button>
<div id="selections">
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div>
#selections {
position: absolute;
display: none;
}
#selections li.selected {
background-color: #ccc;
}
$('#selectBox').click(function(){
$('#selections').show();
});
$('#selections li').click(function(){
var selectedValue = $(this).text();
$('#textbox').val(selectedValue);
$('#selections').hide();
});
$('#selections li').click(function(){
$('#selections li').removeClass('selected');
$(this).addClass('selected');
});
沃梦达教程
本文标题为:jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法


猜你喜欢
- javascript:void(0)的真正含义实例分析 2023-12-01
- JavaScript制作简单分页插件 2023-12-02
- vue+NuxtJS使用 scss 2023-10-08
- JavaScript可视化与Echarts详细介绍 2022-08-31
- CSS中的滑动门技术 2022-10-16
- js+ajax处理java后台返回的json对象循环创建到表格的方法 2023-01-21
- 第19天 django 文件上传 CBV和FBV html模板语言 url的正则表达式 django的路由名称 django使用mysql注意的事项 model的CRUD django的字段参数 d 2023-10-25
- vue导出当前页面为pdf格式 2023-10-08
- Ajax请求中async:false/true的作用分析 2022-12-15
- Vue 瀑布流布局,拖拽排序,放缩 2023-10-08