重复添加一个相同的div块三次

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了重复添加一个相同的div块三次相关的知识，希望对你有一定的参考价值。

我做的是一个省市二级联动的一个div块，我现在需要在点击添加按钮之后，在这个div块的下面出现相同的div块，并且其中的二级联动还可以用，之后还有获取其中的值。如果有不清楚的可以问我
这是html：
<div id="addAddress">
<input type="radio" id="newRadio" class="new" name="addr" value="1" />
<select id="proSelect" name="pro">
<option>-请选择-</option>
<option>河北省</option>
<option>山西省</option>
<option>辽宁省</option>
</select>省
<select id="citySelect" name="city">
<option>城市</option>
</select>市
<input type="text" id="areatxt" class="area" value="" />
<button id="deleteBtn">删除</button>
<br />
</div>
这是JS:
$("#proSelect").change(function()
var pro = $(this).val();
var i, j, tmpcity = new Array();
for (i = 0; i < sf.length; i++)
if (pro == sf[i][0].toString())
tmpcity = sf[i][1].split("|");
$("#citySelect").html("");
for (j = 0; j < tmpcity.length; j++)
$("#citySelect").append("<option>" + tmpcity[j] + "</option>");



);
var sf = new Array();
sf[0] = new Array("河北省", "石家庄|邯郸|邢台|保定|张家口");
sf[1] = new Array("山西省", "太原|大同|阳泉|长治|晋城|朔州|吕梁|忻州|晋中|临汾|运城");
sf[2] = new Array("辽宁省", "沈阳|大连|鞍山|抚顺|本溪|丹东|锦州|营口");
如果有更好的html或者是JS更好，希望能能够帮助我解决这个问题

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<script src="jquery-1.11.1.js"></script>
<body onclick="zy()">

<div class="addAddress">

    <input type="radio" id="newRadio" class="new" name="addr" value="1" />
    <select id="proSelect" name="pro">
        <option>-请选择-</option>
        <option>河北省</option>
        <option>山西省</option>
        <option>辽宁省</option>
    </select>省
    <select class="citySelect" name="city">
        <option>城市</option>
    </select>市
    <input type="text" id="areatxt" class="area" value="" />
    <button id="deleteBtn">删除</button>
    <button id="add" >增加</button>
    <br />

</div>
<script type="text/javascript">
    var flag=0;
    $("body").delegate("#add","click",function()
        var clone="<div class='qwer'+flag><input type='radio' id='newRadio' class='new' name='addr' value='1' /><select #='proSelect' name='pro'><option>-请选择-</option><option>河北省</option><option>山西省</option><option>辽宁省</option></select>省<select class='citySelect' name='city'><option>城市</option></select>市<input type='text' id='areatxt' class='area' value='' /><button id='deleteBtn'>删除</button><button id='add' >增加</button><br /></div>"

        $(".addAddress").next().after(clone);
        zy();
    );
          function zy() 
              $("select").change(function () 

                  var pro = $(this).val();
                  var i, j, tmpcity = new Array();
                  for (i = 0; i < sf.length; i++) 
                      if (pro == sf[i][0].toString()) 
                          tmpcity = sf[i][1].split("|");
                          $($(this).next()).html("");
                          for (j = 0; j < tmpcity.length; j++) 
                              $($(this).next()).append("<option>" + tmpcity[j] + "</option>");
                          
                      
                  
              );
              var sf = new Array();
              sf[0] = new Array("河北省", "石家庄|邯郸|邢台|保定|张家口");
              sf[1] = new Array("山西省", "太原|大同|阳泉|长治|晋城|朔州|吕梁|忻州|晋中|临汾|运城");
              sf[2] = new Array("辽宁省", "沈阳|大连|鞍山|抚顺|本溪|丹东|锦州|营口");

          
    </script>
</body>
</html>

 亲测过，是正确的。

如有问题，我们继续交流。


希望能够帮助到你，望采纳！

追问

好的，我给你采纳，然后你关注一下，如果有问题可能还会找你的，谢谢你

 参考技术A 我做过javascript开发，select控件添加option，不是用append这种奇葩的方法的。。。

var op = new Option(tmpcity[j]，tmpcity[j]);
$("#citySelect").options.add(op);
试试这个。有问题再问。追问

这是一个点，但这不是重点，我想要的是重复添加整个div块。。。

让两个div具有相同的高度[重复]

【中文标题】让两个div具有相同的高度[重复]【英文标题】：Let two divs have the same height [duplicate] 【发布时间】：2014-09-28 12:30:06 【问题描述】：

我有两个这样的 div：

<div id="div1">ABC</div>
<div id="div2">ABC DEF GHI JKL MNO</div>

#div1 
    width: 50px;
    background-color: red;
    float: left;


#div2 
    width: 50px;
    background-color: green;
    float: left;

我想让 div1 的高度与 div2 的高度相同。

我该怎么办？谢谢！

JSFIDDLE

【问题讨论】：

为#div1, #div2height: 20px;设置一个静态值 不知道为什么这被否决了，用户解释了他的问题，提供了一个代码，如果你有任何反对的理由，请在投票后发表评论 【参考方案1】：

Demo

最简单的解决方案是将两个 div 包装在一个 div 中并使其显示为 flex；

html

<div class="wrapper">
    <div id="div1">ABC</div>
    <div id="div2">ABC DEF GHI JKL MNO</div>
</div>

css

.wrapper 
    display: flex;

【讨论】：

是的，你是最棒的。我更喜欢您的解决方案，而不是添加大填充底部和负边距底部的解决方案。【参考方案2】：

这样你的两个 div 将获得相同的高度（最大 Div 的高度）

（此代码使用 JQuery）

$( document ).ready(function() 
    var s1 = $('#div1').height();
    var s2 = $('#div2').height();

    if (s1 > s2)
        $('#div2').css('height', s1 + "px");
    else
        $('#div1').css('height', s2 + "px");
);

【讨论】：

【参考方案3】：

使用 jquery 你可以这样做：

var tallness = $("#div2").height();
$("#div1").height(tallness);

JSFIDDLE

【讨论】：

【参考方案4】：

如果您介意旧浏览器或旧的可靠方法，您可以查看 http://alistapart.com/article/fauxcolumns 一个经典的，现在可以使用很长时间了 :) 并且适合您的需求，因为设置了元素的宽度.

一个非常古老的模板仍然使用这种方法和 3 col 布局：http://www.pixy.cz/blogg/clanky/css-3col-layout/（那里没有 flex 和 table 也没有 js ;)）

【讨论】：

以上是关于重复添加一个相同的div块三次的主要内容，如果未能解决你的问题，请参考以下文章

当 1 px 边框添加到 div 时，Div 大小增加，不想这样做[重复]

块三对角矩阵python

使子div与父元素的高度相同[重复]

如何在同一位置刷新div，避免重复行

从具有相同ID的多个div中获取数据 - jquery [重复]

让两个div具有相同的高度[重复]