jquery-editable-select设置显⽰默认选项
在这篇博⽂中使⽤到了jquery-editable-select控件，这个控件既可以⼿动输⼊也可以⽤于下拉选择，类似MFC中的combobx控件，在特定场景下⾮常⽅便。
下⾯将分享“如何解决页⾯加载时设置默认的显⽰选项”。
HTML结构
下⾯是html代码，说明了select元素信息和option内容。
<div class="row-fluid">
<div class="span7">
<label for="edit_id">可编辑的下拉选择控件</label>
<select id="edit_id">
<option value="BMW">BMW</option>
<option value="Form">Form</option>
<option value="Audi">Audi</option>
</select>
</div>
</div>
如果是⼀般的select元素，以上html代码就可以完成；如果为了达到可编辑的效果，需要增加如下的JavaScript初始化代码：
$(document).ready(function() {
//初始化控件
$('#edit_id').editableSelect({
filter: false ,
});
})
设置默认值
对于⼀般的select元素，设置默认显⽰选项有两种⽅法：
⽅法⼀：
通过val()⽅法设置表单字段的值，JS代码如下：
$("#edit_id").val("Audi");
⽅法⼆：
通过设置option元素的selected属性，JS代码如下：
$("#edit_id > option[value="Audi"+]).attr("selected",true);
但对于可编辑的select元素，只能采⽤⽅法⼆；需要注意的是，如果我们的option项是动态添加的，需要按照以下步骤进⾏：
1. 动态添加option内容
2. 设置option元素的selected属性
3. 调⽤实例化控件函数
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引⼊css样式表-->
<link rel="stylesheet" href="../PLugin/jquery-editable-select.css">
</head>
<body>
jquery的attr属性
<div class="row-fluid">
<div class="span7">
<label for="edit_id">可编辑的下拉选择控件</label>
<select id="edit_id">
<option value="BMW">BMW</option>
<option value="Form">Form</option>
<option value="Audi">Audi</option>
</select>
</div>
</div>
<!--引⼊jquery库和jquery-editable-select.js⽂件-->
<script type="text/javascript" src="../jquery/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../plugin/jquery-editable-select.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//设置selected属性，需要在初始化控件前完成
setSelectedOption("#edit_id", "Audi");
//$("#edit_id").val("Audi")；不⽣效
//初始化控件
$('#edit_id').editableSelect({
filter: false ,
});
})
//设置页⾯初始化时的选项
function setSelectedOption(selector, value){
if (value.length !=0) {
$(selector +" > option[value='"+value+"']").attr("selected",true);        }
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。