mobiscroll.js select

今天早上用到了mobiscroll.js的select组件。虽然，直接使用select组件会生成一个input标签，从这个input标签就可以获得我们选择的值；根据需求我在点击自己写的input标签是才触发select组件，可是这样就无法获得组件生成的input的值。
该如何做呢，让我们来一步步的去实现它吧。
首先要在页面引入mobiscroll.css和mobiscroll.js，我用的是jQuery版本，所以我引入的是

<link href="css/mobiscroll.jquery.min.css" rel="stylesheet" type="text/css">

和

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

然后就是在body中加入以下标签

  <input type="text"  placeholder="请选择金额" id="price"  />  
  <div style='display:none;'>
     <select  id="price_select" >
          <option value="1">30</option>
          <option value="2">40</option>
          <option value="3">50</option>
          <option value="4">60</option>
          <option value="5">70</option>
          <option value="6">80</option>
          <option value="7">90</option>
          <option value="8">100</option>
      </select>
  </div>

接着就是在JavaScript标签中书写js初始化mobiscroll.js

<script>
    $('#price_select').mobiscroll().select({
       theme: 'ios', 
       lang: 'zh',
       display: 'bottom',
       group: true,
       //点击确定是把获取的值赋值给自己书写的input标签
       onSet:function(obj,inst){
           $('#price').val(obj.valueText);
       }
   });
   //点击input 触发select组件
   $("#price").click(function() {
       $('#price_select').mobiscroll('show');
       return false;
   })
  </script>