jquery-weui select组件的默认值使用
最近经常做微信页面，公司用jquery-weui做为ui组件库，因为之前没用过，在有些地方还是有些卡壳。在我看来，这个组件库文档在有些地方不够详尽、清楚，需要自己尝试探索，就比较花时间，所以今天决定把之前遇到的问题记录下来，加深下印象。
粗体
select默认值的使用
如果显示值和实际值一样，很简单，直接用显示值就可以，在input中直接给value赋值,或者用js赋值(''#xx).val()取值的时候也不会有什么问题。
如果显示值和实际值不一样（比如我需要显示某部门，传给后台要部门id），就稍微麻烦点了。如果直接给value赋值部门名称，可以显示默认值，但我们此时用$(''#xx).val()取值，获取的是部门名称，而不是我们想要的部门id。那我们就想 如果直接赋值部门id,获得的不就是部门id了,不错，我们是获得了部门id,显示的又不是我们想要的效果，我们要显示部门名称啊。那怎么办呢？其实文档给了说明，只可惜当时我看文档只是扫了一眼，没有领会它的意思，只知道复制代码，然后实现功能，需要默认值的时候想当然的用了自己的方法，却解决不了，后面苦思冥想，才又去来回仔细看文档，才明白意思。哎，回头想想自己好蠢啊。我把文档那几句话再摘录过来。
当设置了不同的显示值和实际值时请注意，这个时候 input 的 value 依然是显示值，而实际值存储在 data-values 属性中。如果
你设置了初始值，请保证同时设置了 value 和 data-values 两个值。
所以正确的方案来了。先把错误的代码展示一下：
1、赋值为 显示值
<body>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="" class="weui-label">显示不一致</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="complex-sel" value="iPhone 7">
</div>
</div>
</div>
<script src="../assets/lib/jquery/jquery-2.1.4.js"></script>
<script src="../assets/lib/art-template/template-web.js"></script>
<script src="../assets/lib/jquery-weui/js/jquery-weui.min.js"></script>
<script type="text/javascript">
console.log($('#complex-sel').val());//"iPhone 7"
$("#complex-sel").select({
title: "选择手机",
items: [
{
title: "iPhone 3GS",
value: "001",
},
{
title: "iPhone 5",
value: "002",
},
{
title: "iPhone 5S",
value: "003",
},
{
title: "iPhone 6",
value: "004",
},
{
title: "iPhone 6S",
value: "005",
},
{
title: "iPhone 6P",
value: "006",
},
{
title: "iPhone 6SP",
value: "007",
},
{
title: "iPhone SE",
value: "008",
},
{
title: "iPhone 7",
value: "009"
}
]
});
</script>
</body>
1.png
2、赋值为实际值
<body>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="" class="weui-label">手机类型</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="complex-sel" value="009">
</div>
</div>
</div>
<script src="../assets/lib/jquery/jquery-2.1.4.js"></script>
<script src="../assets/lib/art-template/template-web.js"></script>
<script src="../assets/lib/jquery-weui/js/jquery-weui.min.js"></script>
<script type="text/javascript">
console.log($('#complex-sel').val());//"009"
$("#complex-sel").select({
title: "选择手机",
items: [
{
title: "iPhone 3GS",
value: "001",
},
{
title: "iPhone 5",
value: "002",
},
{
title: "iPhone 5S",
value: "003",
},
{
title: "iPhone 6",
value: "004",
},
{
title: "iPhone 6S",
value: "005",
},
{
title: "iPhone 6P",
value: "006",
},
{
title: "iPhone 6SP",
value: "007",
},
{
title: "iPhone SE",
value: "008",
},
{
title: "iPhone 7",
value: "009"
}
]
});
</script>
</body>
2.png
3、两个都赋值
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>服务统计</title>
<link rel="stylesheet" href="../assets/lib/weui/weui.min.css">
<link rel="stylesheet" href="../assets/lib/jquery-weui/css/jquery-weui.min.css">
</head>
<body>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="" class="weui-label">手机类型</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="complex-sel">
</div>
</div>
</div>
<script src="../assets/lib/jquery/jquery-2.1.4.js"></script>
<script src="../assets/lib/art-template/template-web.js"></script>
<script src="../assets/lib/jquery-weui/js/jquery-weui.min.js"></script>
<script type="text/javascript">
$('#complex-sel').val("iPhone 7");
$('#complex-sel').attr("data-values","009");
console.log($('#complex-sel').val(),$('#complex-sel').attr("data-values"));//"009","iPhone 7"
$("#complex-sel").select({
title: "选择手机",
items: [
{
title: "iPhone 3GS",
value: "001",
},
{
title: "iPhone 5",
value: "002",
},
{
title: "iPhone 5S",
value: "003",
},
{
title: "iPhone 6",
value: "004",
},
{
title: "iPhone 6S",
value: "005",
},
{
title: "iPhone 6P",
value: "006",
},
{
title: "iPhone 6SP",
value: "007",
},
{
title: "iPhone SE",
value: "008",
},
{
title: "iPhone 7",
value: "009"
}
]
});
</script>
</body>
3.png
大功告成。无论是显示还是切换都没有问题。所以看文档还是要仔细，不会的要反复看文档，一般都有交待，再不然就去网上查下看下别人的经验。
