jquery-editable-select设置显示默认选项

在可编辑的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>

秒客网

jquery-editable-select设置显示默认选项

相关文章