[jQuery Mobile]jQuery clone的select元素选中值不显示解决

问题描述

这两天还得修改jQuery Mobile那个移动手机端的项目。需求有了变动:报销单页面里面的 路程信息 需要改为明细,可以动态增加多条路程信息。

在修改过程中碰到了这样一个问题,我用jQuery的clone方法克隆了明细的几个form元素,有三个input:text的文本框,两个select的单选列表。结果新增完结点,显示正常,但是在选择下拉列表框选中一个别的值的时候,他显示的值仍然是冷冰冰的最初值,我也做了测试,虽然后台form提交的值已经是选中的值,但是,就是前端这个select的显示选中的值未变。经过一天的查询资料,修改代码,测试,终于完美的解决了这个问题。最终实现的添加明细效果如下:点击增加路程,会添加一条红框内的内容。

jQuery Mobile 添加明细效果

解决方法

查找原因

看了很多外国朋友的帖子,很多说原因是clone方法克隆的结点,未经过jQuery Mobile框架渲染,有的说要出发create()方法,有的要修改pageinit事件等。最终找到了一个可供我参考的代码,是在jsFiddle上写的。我把我自己的测试好的代码也放到了这个网站上,在文末,会将地址共享!

编写测试

可供参考的代码是只针对一个select进行克隆复制,不过这也的确给了我很大的启发。我的web项目是基于 jQuery Mobile 1.3.2 和jQuery 1.9.1的。具体的实现代码如下:

html代码:

<h3 style="color: blue; margin:0 auto;">
    报销单据
    <span style="float:right;">
        <a href="javascript:;" style="text-decoration: none;" id="addFee">增加路程</a>
    </span>
</h3>
<div id="divFee">
    <input type="hidden" value="0" id="hidNum"/>
    <div id="divRoute0">
        <fieldset class="ui-grid-b">
            <div class="ui-block-a">
                <label for="txtStartPlace0">起点:</label>
                <input type="text" name="StartPlace0" id="txtStartPlace0" data-mini="true"/>
            </div>
            <div class="ui-block-b">
                <label for="txtEndPlace0">终点:</label>
                <input type="text" name="EndPlace0" id="txtEndPlace0" data-mini="true"/>
            </div>           
        </fieldset>
        <div class="ui-grid-c">
             <div class="ui-block-a">
                <label for="selFeeType0">类别:</label>
                <select name="FeeType0" id="selFeeType0" class="sel1" data-mini="true"  data-native-menu="true">
                    <option value="住宿费">住宿费</option>
                    <option value="招待费">招待费</option>
                    <option value="邮寄费">邮寄费</option>
                    <option value="标书费">标书费</option>
                    <option value="其他">其他</option>
                </select>
            </div>
            <div class="ui-block-b">
                <label for="txtFee0">金额:</label>
                <input type="text" data-mini="true" name="Fee0" id="txtFee0"/>
            </div>
            <div class="ui-block-c">
                <label for="selFeeNum0">单据张数</label>                           
                <select name="FeeNum0" id="selFeeNum0" data-mini="true" class="sel2" data-native-menu="true">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>                    
                </select>
            </div>
        </div>
        <hr/>
    </div>
</div>

js代码:

$('#addFee').click(function(){
 var num = $('#hidNum').val();
    num = parseInt(num);
    num++;
    $('#hidNum').val(num);    
    var div=$('#divRoute0').clone().attr('id', 'divRoute' + num).fadeIn("slow");
    div.find('label').each(function(){
        var id = $(this).attr('for');
        var newid = id.substr(0, id.length - 1) + num;
        $(this).attr('for', newid);
    })
    div.find('input').each(function(){
    	$(this).val('');
        var id = $(this).attr('id');
        var name = $(this).attr('name');
        var newid = id.substr(0, id.length - 1) + num;
        var newname = name.substr(0, name.length - 1) + num;
        $(this).attr('id', newid).attr("name", newname);
    })       
    div.find('div.ui-select').each(function(){
        var tmp=$(this).find('select').clone();
        console.log(tmp);
    	$(this).before(tmp).remove();       
    })   
    div.find('select').selectmenu();
    $('#divFee').append(div);      
})

总结

大家好好理解下js代码里面的内容。其实主要解决的思路就是:取到克隆结点里的select元素,把之前jQuery Mobile渲染过的代码去除,只克隆了纯粹的select代码,然后增加过新的克隆过的元素后,再次将select元素渲染下。

源码地址

http://jsfiddle.net/lubeiaa/7dqoj23q/

分享到:更多 ()

抢沙发

评论前必须登录!