通過JS模擬select表單，達到美化效果[demo]

本文轉載自查看原文 2014-01-13 14:21 2954 SelectorJS/ 模擬select

通過JS模擬select表單，達到美化效果

Demo

婚姻狀況：

未婚

年齡：

至

身高：

至

居住地:

出生地:

月收入:

至

Code

// 普通模式
       new SelectorJS.selector.init({
        id:'#Marriage',
        data: [["1", "未婚"], ["3", "離異"], ["4", "喪偶"] ],
        value:'未婚'
      });

       // 年齡聯動
       new SelectorJS.age('#Age0','#Age1',25,27);

       // 身高聯動
       new SelectorJS.heightMulti('#Height0','#Height1',168,178);

       // 地區聯動二級
       new SelectorJS.area.init('#AreaSelector','101020600', false);

       // 地區聯動三級
       new SelectorJS.area.init('#AreaSelector2','101151202', true);

       // 自定義聯動
       var salaryCode = [["1", "1000"], ["2", "2000"], ["3", "3000"], ["4", "5000"], ["5", "8000"], ["6", "10000"], ["7", "20000"], ["8", "50000"], ["9", "50000以上"] ];
       var salaryDefault1 = '1';
       var salaryDefault2 = '4';
       new SelectorJS.selector.init({
        id:'#Salary0',
        data: salaryCode,
        value:salaryDefault1,
        click: function(val, index){
           new SelectorJS.selector.init({
            id:'#Salary1',
            data: salaryCode.slice(index),
            value:  Math.max(salaryCode[index][0], parseInt(salaryDefault2) )
          }).select.click();
        }
      });
       new SelectorJS.selector.init({
            id:'#Salary1',
            data: salaryCode.slice(parseInt(salaryDefault1)),
            value:  salaryDefault2
      });

說明

Selector.js與address.json兩個文件必須放在同一個目錄下。當調用地區的方法的時候才加載adrress文件

github下載地址：http://dreamback.github.io/selectorjs/index.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 通過JS模擬select表單，達到美化效果[demo][轉] html select美化模擬jquery插件select2.js Echarts (option.legend) 圖例的屬性，外部控制圖例的select狀態，以達到模擬圖例的效果