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