WeUI——select_primary模擬選擇框

前端：

文章來源：https://weui.io/#form_select_primary

CSS、JS下載地址：

　　weui.css：https://blog-static.cnblogs.com/files/ZM191018/weui.css

　　weui.min.js：https://blog-static.cnblogs.com/files/ZM191018/weui.min.js

　　weui.min.js：https://blog-static.cnblogs.com/files/ZM191018/weui.min.js

引入CSS樣式、JS腳本文件

要注意：在引用路徑下必須找得到對應的CSS樣式文件或者JS腳本文件，否則會異常。

<link rel="stylesheet" href="\js\weui\weui.css">
<script src="\js\weui\jquery.min.js"></script>
<script src="\js\weui\weui.min.js"></script>

HTML代碼

<div class="page">
  <div class="weui-form">
    <div class="weui-form__text-area">
      <h2 class="weui-form__title">模擬選擇框</h2>
      <div class="weui-form__desc">用於豐富原生選擇框結構，使其更具有擴展性</div>
    </div>
    <div class="weui-form__control-area">
      <div class="weui-cells__group weui-cells__group_form">
        <div class="weui-cells">
          <div class="weui-cell weui-cell_active weui-cell_access" id="showDatePicker">
            <div class="weui-cell__bd">日期</div>
            <div class="weui-cell__ft"></div>
          </div>
          <div class="weui-cell weui-cell_active weui-cell_access weui-cell_select weui-cell_select-before">
            <div class="weui-cell__hd" id="showPhone"><label class="weui-label">+86</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="number" pattern="[0-9]*" placeholder="請輸入號碼" value="12345678907"/>
            </div>
          </div>
          <div class="weui-cell weui-cell_active weui-cell_access weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd"><label class="weui-label">票種</label></div>
            <div class="weui-cell__bd" id="showPicker">的士票</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

 

JS事件

<script type="text/javascript">
    $('#showPhone').on('click', function () {
        weui.picker([{
            label: '+86',
            value: 0
        }, {
            label: '+80',
            value: 1
        }, {
            label: '+84',
            value: 2
        }, {
            label: '+87',
            value: 3
        }], {
            onChange: function (result) {
                console.log(result);
            },
            onConfirm: function (result) {
                console.log(result);
                
                $('#showPhone label').text(result[0].label);
            },
            title: '單列選擇器'
        });
    });
    $('#showPicker').on('click', function () {
        weui.picker([{
            label: '飛機票',
            value: 0
        }, {
            label: '火車票',
            value: 1
        }, {
            label: '的士票',
            value: 2
        },{
            label: '公交票 (disabled)',
            disabled: true,
            value: 3
        }, {
            label: '其他',
            value: 4
        }], {
            onChange: function (result) {
                console.log(result);
            },
            onConfirm: function (result) {
                console.log(result);
                console.log(result[0].label);
                $('#showPicker').text(result[0].label);
            },
            title: '單列選擇器'
        });
    });
    $('#showDatePicker').on('click', function () {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            onChange: function (result) {
                console.log(result);
            },
            onConfirm: function (result) {
                console.log(result);
                var datetime='';
                for(var i in result){
                    
                    datetime+=result[i].label;
                    
                }
                console.log(datetime);
                $('#showDatePicker .weui-cell__ft').text(datetime);
            },
            title: '多列選擇器'
        });
    });
</script>

 

演示