fselect-example

原生select 转换

js 代码 : $('#ex_0').fselect();
html :
<select name="" id="ex_0" class="ex_0">
    <option value="">请选择</option>
    <option value="610100">西安市</option>
    <option value="610200">铜川市</option>
    <option value="610300">宝鸡市</option>
    <option value="610400">咸阳市</option>
    <option value="610500">渭南市</option>
    <option value="610600">延安市</option>
    <option value="610700">汉中市</option>
    <option value="610800">榆林市</option>
    <option value="610900">安康市</option>
    <option value="611000">商洛市</option>
</select>

非原生select

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_1"></div>
JS代码 : $('#ex_1').fselect();

width:宽度的使用

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_2"></div>
JS代码 : $('#ex_2').fselect({width:300});

height:高度的使用

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_3"></div>
JS代码 : $('#ex_3').fselect({height:40});

data:数据

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_4"></div>
JS代码 :
    $('#ex_4').fselect({
        width:100,
        data:[['610100', '西安市', false],['610200', '铜川市', false],['610300', '宝鸡市', true],['610400', '咸阳市', false],['610500', '渭南市', false],['610600', '延安市', false],['610700', '汉中市', false],['610800', '榆林市', false],['610900', '安康市', false],['611000', '商洛市', false]]
    });

colnumber:显示行数

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_5"></div>
JS代码 :
$('#ex_5').fselect({
    width:100,
    colnumber:3,
    data:[['610100', '西安市', false],['610200', '铜川市', false],['610300', '宝鸡市', true],['610400', '咸阳市', false],['610500', '渭南市', false],['610600', '延安市', false],['610700', '汉中市', false],['610800', '榆林市', false],['610900', '安康市', false],['611000', '商洛市', false]]
});

arrowclass :箭头样式

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_6"></div>
JS代码 :
$('#ex_6').fselect({
    arrowclass:'fselect_arrow_1',//名字可自定义
    data:[['610100', '西安市', false],['610200', '铜川市', false],['610300', '宝鸡市', true],['610400', '咸阳市', false],['610500', '渭南市', false],['610600', '延安市', false],['610700', '汉中市', false],['610800', '榆林市', false],['610900', '安康市', false],['611000', '商洛市', false]]
});

defaulttext : 未选择显示的下拉项文本

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_7"></div>
JS代码 :
$('#ex_7').fselect({
    defaulttext:'请选择城市...',
    data:[['610100', '西安市', false],['610200', '铜川市', false],['610300', '宝鸡市', fasle],['610400', '咸阳市', false]]
});

val :获取值

获取值

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_8"></div>
JS代码 :
$('#ex_8').fselect({
    arrowclass:'fselect_arrow_1',//名字可自定义
    data:[['610100', '西安市', false],['610200', '铜川市', false],['610300', '宝鸡市', true],['610400', '咸阳市', false],['610500', '渭南市', false],['610600', '延安市', false],['610700', '汉中市', false],['610800', '榆林市', false],['610900', '安康市', false],['611000', '商洛市', false]]
});
$('#ex_8').fselect('val');

val : 设置值选中

设置值

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_9"></div>
JS代码 :
$('#ex_9').fselect({
    data:[['610100', '西安市', false],['610200', '铜川市', false]]
});
$('#ex_9').fselect('val','610100');

loaddata : 加载值

加载值

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_10"></div>
JS代码 :
$('#ex_10').fselect({
    data:[['610100', '西安市', true],['610200', '铜川市', false]]
});
$('#ex_10').fselect('loaddata',[['610300', '宝鸡市'],['610400', '咸阳市',true],['610100', '西安市']],function (){
    alert('加载完成!');
});

additem : 追加值

追加值

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_11"></div>
JS代码 :
$('#ex_11').fselect({
    data:[['610100', '西安市', true],['610200', '铜川市', false]]
});
$('#ex_11').fselect('additem',[['610300', '宝鸡市'],['610400', '咸阳市',true],['610100', '西安市']],function (){
    alert('加载完成!');
});

removeitem : 删除下拉项

删除值

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_12"></div>
JS代码 :
$('#ex_12').fselect({
    data:[['610100', '西安市', true],['610200', '铜川市', false]]
});
$('#ex_12').fselect('removeitem',[['610300','610400','610100']],function (){
    alert('删除完成!');
});

disabled/enable : 禁用/启用下拉

禁用

启用

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_12"></div>
JS代码 :
$('#ex_13').fselect({
    data:[['610100', '西安市', true],['610200', '铜川市', false]]
});
$('#ex_13').fselect('disabled',function (){alert('禁用完成!');});
$('#ex_13').fselect('enable',function (){alert('启用完成!');});

onselect : 选中下拉选项后触发

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_14"></div>
JS代码 :
$('#ex_14').fselect({
    data:[['610100', '西安市', true],['610200', '铜川市', false]]
});
$('#ex_14').fselect('onselect',function (_data){alert(_data);});

测试IE6 select 遮挡

Html代码 (class 'fselectbox'必须有): <div class="fselectbox" id="ex_15"></div>
JS代码 :
$('#ex_15').fselect({
    data:[['610100', '西安市', false],['610200', '铜川市', false],['610300', '宝鸡市', true],['610400', '咸阳市', false],['610500', '渭南市', false],['610600', '延安市', false],['610700', '汉中市', false],['610800', '榆林市', false],['610900', '安康市', false],['611000', '商洛市', false]]
});