给div拼接html 拼接字符串

简单描述：拼接html 拼接字符串，说实话，拼接这种东西我自己弄，得花费很多时间，主要是转义字符，单引号，双引号这种小细节调整起来比较麻烦，一旦疏忽多了少了一个符号，页面就有点抽象了，我呢比较粗枝大叶(ｷ｀ﾟДﾟ´)!!   点击按钮，把地区三级联动里的值拼接到页面的div中。废话不多讲，上代码

代码：

//html代码
<div class="col-md-2">
    <select id="province" placeholder="请选择省">
        <option th:each="level : ${serviceProvinceMap}" 
　　　　　　　　　 th:value="${level.provinceCode}"
                th:text="${level.provinceName}" xmlns:th="http://www.w3.org/1999/xhtml"></option>
    </select>
</div>
<div class="col-md-2">
    <select id="city" placeholder="请选择市">

    </select>
</div>
<div class="col-md-2">
    <select id="country" placeholder="请选择县">

    </select>
</div>
<div class="col-md-1">
        <button type="button" class="btn blue" id="addRegion">
            <i class="fa fa-check"></i>添加该地区
        </button>
</div>
<div  id="chooseAreaspi">

</div>
<input type="hidden" id="provinceHid" name="province" value=""/>
<input type="hidden" id="cityHid" name="city" value=""/>
<input type="hidden" id="countyHid" name="county" value=""/>
//js代码

<script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
    var province ='';//初始是''随后会变成'浙江省,江苏省,北京市,'
    var city=''; //初始时''，随后都会变成以逗号分隔的字符串并且末尾带逗号
    var county='';//同上
    /*<![CDATA[*/
    $("#addRegion").click("click",function () {
        // 获取到省下拉框的值 也就是得到省编码
        var provinceCheck = $("#province").val();
        if (provinceCheck == "" ||provinceCheck== null) {
            layer.msg("请填写地区信息！");
            return false;//跳出方法
        }
　　　　 //indexOf括号中的是 获取到省下拉框中获取到的文本 比如说浙江省
　　　　 //indexOf作用是从province字符串变量中索引是否有 浙江省 这个字符
　　　　 //if的意思是 省不包含某省的字符并且市不包含某市的字符并且区不包含区的字符 注意!
        if(province.indexOf($("#province").find("option:selected").text())!=-1 &&
            city.indexOf($("#city").find("option:selected").text())!=-1 &&
            county.indexOf($("#country").find("option:selected").text())!=-1 ){
            layer.msg("该地区已经存在！");
            return false;
        }
　　　　 //html拼接 给id是chooseAreaspi的div拼接html
　　　　 // "\n"是可以不写的，粘贴html的时候，回车换行后自带的，可以删掉，亲测可行
        var html='<br class="br"/><br class="br"/><div class="col-md-1 quyu">\n' +
            '<label class="control-label flex" >\n' +
            '使用地区<span class="star align-items">*</span>\n' +
            '</label>\n' +
            '</div><div  class="col-md-5 quyu">'+$("#province").find("option:selected").text()+'--'+$("#city").find("option:selected").text()+'--'+$("#country").find("option:selected").text()+'</div>';
        $("#chooseAreaspi").append(html);
　　　　 
　　　　 //province city county 变量拼接字符串用逗号分隔并且字符串末尾带逗号 "浙江省,江苏省,"
        province+=$("#province").find("option:selected").text()+",";
        city+=$("#city").find("option:selected").text()+",";
        county+=$("#country").find("option:selected").text()+",";
　　　　 //substring作用就是把province city county的末尾的逗号去掉 "浙江省,江苏省"
        var subprovincehid =province.substring(0,province.length-1);
        var subcityHid =city.substring(0,city.length-1);
        var subcountyHid =county.substring(0,county.length-1);
        $("#provinceHid").val(subprovinceHid);
        $("#cityHid").val(subcityHid);
        $("#countyHid").val(subcountyHid);
    });
    /*]]>*/
</script>

转载于:https://www.cnblogs.com/xuchao0506/p/9776791.html