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

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


    

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

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

 

最后,在表单提交时,把值赋给隐藏表单。
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!''}"},
          
        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!''}"}],
          
        items: ${didians},
        placeholder: '请选择'
    });

指定属性变化时的事件

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

    })

你可能感兴趣的:(其它)