Easyui form combobox省市区三级联动_javascript技巧

WBOY
リリース: 2016-05-16 15:20:08
オリジナル
1924 人が閲覧しました

使用方法

$(function () {
//省市区三级联动
$.citySelect({ $province: $('#province'), $city: $('#city'), $County: $('#county') });
$('#ff').form('load', { 'province': '广东省', 'city': '深圳市', 'county': '罗湖区' });
});
<form id="ff" method="post">
<table>
<tbody>
<tr>
<td>
<label for="province">省:</label>
</td>
<td>
<input id="province" name="province" type="text" class="easyui-combobox" />
</td>
</tr>
<tr>
<td>
<label for="city">市:</label>
</td>
<td>
<input id="city" name="city" type="text" class="easyui-combobox" />
</td>
</tr>
<tr>
<td>
<label for="county">区:</label>
</td>
<td>
<input id="county" name="county" type="text" class="easyui-combobox" />
</td>
</tr>
</tbody>
</table>
</form>
ログイン後にコピー

扩展combobox,获取选中值索引

$.extend($.fn.combobox.methods, {
setIndex: function (jq, index) {
if (!index)
index = ;
var data = $(jq).combobox('options').data;
var vf = $(jq).combobox('options').valueField;
$(jq).combobox('setValue', eval('data[index].' + vf));
},
getIndex: function (jq) {
var index = ;
var data = $(jq).combobox('options').data;
var vf = $(jq).combobox('options').valueField;
var value = $(jq).combobox('getValue');
if (data != null && data.length != null) {
for (var i = ; i < data.length; i++) {
if (value == eval('data[i].' + vf))
index = i;
}
}
return index;
}
}); 
ログイン後にコピー

citiselect.js

(function ($) {
$.extend({
citySelect: function (settings) {
var $province = settings.$province;
var $city = settings.$city;
var $County = settings.$County;
var s = [$province, $city, $County];
var provinces = new Array("北京市", "天津市", "上海市", "重庆市", "河北省", "山西省", "内蒙古", "辽宁省", "吉林省", "黑龙江省", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "广西", "海南省", "四川省", "贵州省", "云南省", "西藏", "陕西省", "甘肃省", "青海省", "宁夏", "新疆", "香港", "澳门", "台湾省");;
var getObjs = function (v) {
var str = "";
for (var i = ; i 
ログイン後にコピー
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート