要实现将弹出窗口中选中的内容赋值给文本框,可以通过以下步骤实现:
$('#selectBox').click(function(){
// 在函数内部编写后续代码
})
$('#selectBox').click(function(){
// 弹出窗口代码
// 监听选择框内容的点击事件
$('#selections').children('li').click(function(){
// 选中项的值
var selectedValue = $(this).text();
// 赋值给文本框
$('#textbox').val(selectedValue);
});
});
<ul id="selections">
<li class="option">选项1</li>
<li class="option">选项2</li>
<li class="option">选项3</li>
</ul>
$('#selections').children('li').addClass('option');
#selections li {
display: none;
}
#selections li.selected {
background-color: #ccc;
}
$('#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');
});
本文链接:http://task.lmcjl.com/news/11604.html