Framework7--picker的使用

需求：

1. 打开页面，文本框中默认显示自己选中的值
2. 选中之后需要将该选项所代表的id赋在文本框上，因为提交后台是取得的id值

<div class="views">
	<div class="view view-main">
		<div class="pages">
			<div data-page="meterEdit" class="page">
				<div class="page-content">
					<div class="list-block my">
						<ul>					
							<li class="item-content" style="background-color: #d9dde0;">
								<div class="item-inner">
									<div class="item-title">上级位置：</div>
									<div class="item-input">
							           <input type="text" placeholder="请选择" readonly id="picker-dependent">
							        </div>
								</div>
							</li>
						</ul>
					</div>
                    <div id="picker-date-container"></div>
				</div>
			</div>
		</div>
	</div>
</div>

 js：

1. rul.data.map是我ajax取得的值
2. value对应的superior是打开页面，文本框中默认显示的值。我这里格式为['1级','2']，2是‘ZRX520 小屋’默认不显示的值，即：‘ZRX520 小屋’ ==》列显示值，‘2’：列值
3. $$('#picker-dependent').attr('PMID',values[1]);就是给文本框添加属性，values[1]就是我前面所谓的id值了，也就是列值。提交给后台时，取得PMID属性值即可

 

var disVendors=rul.data.map;//列显示值
var carVendors=rul.data.map2;//列值
var pickerDependent = myApp.picker({
    input: '#picker-dependent',
    rotateEffect: true,
    container: '#picker-date-container',
    toolbar: false,
    value:superior,

    formatValue: function(picker, values,displayValues) {
        $$('#picker-dependent').attr('PMID',values[1]);
        return displayValues[1];//文本框显示值
    },
    cols: [{
        textAlign: 'left',
        values: ser,
        onChange: function(picker, values) {
            if(picker.cols[1].replaceValues) {
                picker.cols[1].replaceValues(carVendors[values],disVendors[values]);
            }
        }
    },{
        textAlign:'center',
        values: carVendors.无,//列值
        displayValues:disVendors.无,//列显示值
        width: 250
    }]
});