在可编辑的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项是动态添加的，需要按照以下步骤进行：
- 动态添加option内容
- 设置option元素的selected属性
- 调用实例化控件函数
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入css样式表-->
<link rel="stylesheet" href="../PLugin/jquery-editable-select.css">
</head>
<body>
<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>