带输入框的下拉框selectivity-jquery使用

首先，从官网下载js文件，在html中引用。

<link rel="stylesheet" type="text/css" media="screen" href="/css/selectivity-jquery.css">
    <script type="text/javascript" src="/js/selectivity-jquery.js"></script>

第二步，指定一个div来存放下拉框数据

<div class="layui-input-inline">
                                <div id="position1" name="position1">
                                </div>
                            </div>

第三步，指定一个隐藏表单，用于提交选中的数据

 <input id="position" name="position"   hidden>

最后，在表单提交时，把值赋给隐藏表单。
form表单指定οnsubmit="return checkvalue()"属性

function checkvalue(){
        $('#position').val(position);
        return true
    }

单选下拉框

单选，multiple属性是false

data属性，指定默认选中的选项，必须同时指定id和text属性。
items是下拉框的所有数据

$('#position1').selectivity({
        allowClear: true,
        multiple:false,
          <#if position??>
                    data:{'id':"${position!''}",'text':"${position!''}"},
          </#if>
        items: ${didians},
        placeholder: '请选择'
    });

指定属性变化时的事件

 $("#position1").on("change", function(e) {
        position=''
        $('#position1 .selectivity-single-selected-item').each(function () {
            position=$(this).text()
        });
    })

复选下拉框

复选，multiple属性是true

data属性，指定默认选中的选项，必须同时指定id和text属性。复选是数组类型的json

items是下拉框的所有数据

 $('#position1').selectivity({
        allowClear: true,
        multiple:true,
          <#if position??>
                    data:[{'id':"${position!''}",'text':"${position!''}"}],
          </#if>
        items: ${didians},
        placeholder: '请选择'
    });

指定属性变化时的事件

 $("#position1").on("change", function(e) {
        position=''
        $('#position1 .selectivity-multiple-selected-item').each(function () {
            position+=" "+$(this).text()
        });
        position=ltrim(position)

    })