在可編輯的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>