jQuery手機端城市兩級聯動代碼



92 366 123



特效描述:jQuery手機端 城市兩級聯動,jQuery手機端城市兩級聯動代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>

3. HTML代碼

<div class="slide-wapper">
  <div class="slide-item">
    <div class="console"></div>
    <div class="title2">二級模擬選擇插件</div>
    <div class="title">二級城市聯動選擇</div>
    <input type="text" class="select-value" value="廣東省">
    <div class="title">二級非聯動選擇</div>
    <div class="select-input2">
      <input type="text" class="select-value2" value="收到額外人 餓的方式度過333" >
    </div>
    <div class="title">單級選擇</div>
    <input type="text" class="select-value3" value="">
    <br>
    <br>
    <!-- 二級非聯動選擇 --> 
    <!--  <input type="text" class="select-value4" value="餓的方式度過 收到額外人" readonly="true" mpicker='picker4'> -->
    <pre>
兩級聯動選擇插件調用:
$('.select-value').mPicker({
    //級別
    level:2,
    //需要渲染的json,二級聯動的需要嵌套子元素,有一定的json格式要求
    dataJson:dataJson,
    //true:聯動
    Linkage:true,
    //顯示行數
    rows:6,
    //默認值填充
    idDefault:true,
    //分割符號
    splitStr:'-',
    //頭部代碼
    header:'<\div class="mPicker-header">兩級聯動選擇插件<\/div>',
    confirm:function(){
        //更新json
        this.container.data('mPicker').updateData(level3);
        //console.info($('.select-value').data('value1')+'-'+$('.select-value').data('value2'));
    },
    cancel:function(){
        //console.info($('.select-value').data('value1')+'-'+$('.select-value').data('value2'));
    }
})
//返回的實例對象,
//包含showPicker,hide,updateData等方法
// var method= $('.select-value').data('mPicker');
// console.info(method)
// method.showPicker();
// method.hide(function(){
//     console.info(this)
// });
        </pre>
  </div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 提示框/彈出層 二級聯動 城市選擇 城市選擇器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子