今天早上用到了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>