jQuery保留旧值并在换行符中添加新内容

时间:2016-10-26 12:30:59

标签: javascript jquery html

我正在选择Make,Model和Year。

基于品牌和型号值的年份显示基于年份。

这是一个截屏。

enter image description here

我希望在检查值时它会附加在上面的复选框中,例如

当我选择make optioin “PRI”时,2005年和“模型”的值为“PRIMODE,Temp pri ”然后我选择Make选项“Yamaha ”,2006年,模型FZ1的值将显示在下一行并保持旧(make选项PRI值)等等......

喜欢enter image description here

这是我的代码。

HTML

<div id="make_parent" style="font-size:15px"></div>

jQuery脚本

<script>
        var checked, checkedValues = new Array();
        //var iCnt = 0;
        var newhtml = '';
        var status = 'true';
        jQuery(document).on("change", "input[type=checkbox]", function(e) {
                var  str = '';
                var existhtml;

                    jQuery("#frame .model_val").each(function() {

                        if(jQuery(this).prop('checked') === true){
                            str =  str + jQuery(this).val()+' ,';
                        }
                        str1 = str.slice(0, -1);
                             newhtml = '<div class="make_'+jQuery("#mec_make").val()+'">'+jQuery("#mec_make").val()+'<div class="year_'+jQuery("#car_year_select").val()+'">'+jQuery("#car_year_select").val()+'<div class="model">'+str1+'</div></div></div>';


                    });

                    jQuery("#make_parent div").each(function (index, element) 
                    {
                        if(jQuery(element).hasClass('make_'+jQuery("#mec_make").val())) {
                            status = 'false';

                            jQuery('.make_'+jQuery("#mec_make").val() + " div").each(function (index1, element1) 
                            {   //alert('fd');  
                                if(jQuery(element1).hasClass('year_'+jQuery("#car_year_select").val())) {
                                    jQuery('.year_'+jQuery("#car_year_select .model").val()).append(str1);
                                }
                                else
                                {
                                    //alert('make_'+jQuery("#mec_make").val()+"-- year_"+jQuery("#car_year_select").val());
                                    jQuery('.make_'+jQuery("#mec_make").val()).append('<div class="year_'+jQuery("#car_year_select").val()+'">'+jQuery("#car_year_select").val()+'<div class="model">'+str1+'</div></div>');
                                }
                            });
                        }
                        else
                        {
                            existhtml = jQuery('#make_parent').html();

                            jQuery("#make_parent").html(existhtml+newhtml);
                        }
                    });

                    if(status == 'true')
                    {
                        existhtml = jQuery('#make_parent').html();                  
                            jQuery("#make_parent").html(existhtml+newhtml);
                    }                   

        });
        </script>

我尝试通过上面的代码进行操作,但它不能按我的意愿工作,它一直显示重复。

我希望输出像..

enter image description here

等等..

0 个答案:

没有答案