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>