2019-10-26

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、赋值为 显示值

        

            

                
显示不一致
                

                    
                
            
        
        
        
        
        
        
    

1.png

2、赋值为实际值

        

            

                
手机类型
                

                    
                
            
        
        
        
        
        
        
    

2.png

3、两个都赋值

    
    
    
    
    


        

            

                
手机类型
                

                    
                
            
        
        
        
        
        
        
    

3.png

大功告成。无论是显示还是切换都没有问题。所以看文档还是要仔细，不会的要反复看文档，一般都有交待，再不然就去网上查下看下别人的经验。