调用.html()时,html选择两次

时间:2017-12-06 13:15:53

标签: javascript jquery html jquery-ui

尝试生成一些动态div html内容。我使用var content = $('#dynamicAddRow0').html();来获取div内容。 我正在获取div内容,问题在于div内容选择标记会出现两次。以下是我的代码

 <div id="dynamicAddRow0">
     <div class="clear-block">
                      <div class="col-sm-4 col-md-4">
                        <div class="form-group cc">
                          <label for="reToSeperate" id="test">From</label>
                          <div class="col-sm-6 col-md-6 no-padding">
                            <form:select  class="selectpicker" path="hraList[0].fromMonth">
                            <option value=""><c:out value="Select"></c:out></option>
                            <c:forEach items="${monthsList}" var="commute">
                              <option value="${commute}"><c:out value="${commute}"></c:out></option>
                              </c:forEach>
                            </form:select>
                          </div>
                          <div class="col-sm-6 col-md-6 no-right-pad">
                            <form:select class="selectpicker" path="hraList[0].fromYear" required="required">
                            <option value=""><c:out value="Select"></c:out></option>
                              <c:forEach items="${yearsList}" var="commute">
                              <option>  <c:out value="${commute}"></c:out></option>
                              </c:forEach>
                            </form:select>
                          </div>

                        </div>
                      </div>
                      <div class="col-sm-4 col-md-4">
                        <div class="form-group cc">
                          <label for="reToSeperate">To</label>
                          <div class="col-sm-6 col-md-6 no-padding">
                            <form:select class="selectpicker" path="hraList[0].toMonth" required="required">
                            <option value=""><c:out value="Select"></c:out></option>
                             <c:forEach items="${monthsList}" var="commute">
                              <option><c:out value="${commute}"></c:out></option>
                              </c:forEach>
                            </form:select>
                          </div>
                          <div class="col-sm-6 col-md-6 no-right-pad">
                            <form:select class="selectpicker" path="hraList[0].toYear" required="required">
                            <option value=""><c:out value="Select"></c:out></option>
                              <c:forEach items="${yearsList}" var="commute">
                              <option><c:out value="${commute}"></c:out></option>
                              </c:forEach>
                            </form:select>

                          </div>

                        </div>
                      </div>
                    </div>
                    </div>

当我在控制台中运行$('#dynamicAddRow0').html()时,我得到以下输出:

<div class="clear-block">
   <div class="col-sm-4 col-md-4">
      <div class="form-group cc">
         <label id="test" for="reToSeperate">From</label>
         <div class="col-sm-6 col-md-6 no-padding">
            <select id="hraList0.fromMonth" name="hraList[0].fromMonth" class="selectpicker" style="display: none;" disabled="disabled">
               <option value="">Select</option>
               <option value="Jan">Jan</option>
               <option value="Feb">Feb</option>
               <option value="Mar">Mar</option>
               <option value="Apr">Apr</option>
               <option value="May">May</option>
               <option value="Jun">Jun</option>
               <option value="Jul">Jul</option>
               <option value="Aug">Aug</option>
               <option value="Sep">Sep</option>
               <option value="Oct">Oct</option>
               <option value="Nov">Nov</option>
               <option value="Dec">Dec</option>
               <option value=""></option>
            </select>
            <div class="btn-group bootstrap-select">
               <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="hraList0.fromMonth" title="Jan" value="" disabled="disabled"><span class="filter-option pull-left">Jan</span>&nbsp;<span class="caret"></span></button>
               <div class="dropdown-menu open">
                  <ul class="dropdown-menu inner selectpicker" role="menu">
                     <li data-original-index="0"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Select</span>"><span class="text">Select</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="1" class="selected"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Jan</span>"><span class="text">Jan</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="2"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Feb</span>"><span class="text">Feb</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="3"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Mar</span>"><span class="text">Mar</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="4"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Apr</span>"><span class="text">Apr</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="5"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>May</span>"><span class="text">May</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="6"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Jun</span>"><span class="text">Jun</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="7"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Jul</span>"><span class="text">Jul</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="8"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Aug</span>"><span class="text">Aug</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="9"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Sep</span>"><span class="text">Sep</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="10"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Oct</span>"><span class="text">Oct</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="11"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Nov</span>"><span class="text">Nov</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="12"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Dec</span>"><span class="text">Dec</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="13"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;></span>"><span class="text"></span><span class="glyphicon undefined check-mark"></span></a></li>
                  </ul>
               </div>
            </div>
         </div>
         <div class="col-sm-6 col-md-6 no-right-pad">
            <select id="hraList0.fromYear" name="hraList[0].fromYear" class="selectpicker" required="required" aria-required="true" style="display: none;" disabled="disabled">
               <option value="">Select</option>
               <option>2017</option>
               <option>2018</option>
            </select>
            <div class="btn-group bootstrap-select">
               <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="hraList0.fromYear" title="2017" value="" disabled="disabled"><span class="filter-option pull-left">2017</span>&nbsp;<span class="caret"></span></button>
               <div class="dropdown-menu open">
                  <ul class="dropdown-menu inner selectpicker" role="menu">
                     <li data-original-index="0"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Select</span>"><span class="text">Select</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="1" class="selected"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>2017</span>"><span class="text">2017</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="2"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>2018</span>"><span class="text">2018</span><span class="glyphicon undefined check-mark"></span></a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-4 col-md-4">
      <div class="form-group cc">
         <label for="reToSeperate">To</label>
         <div class="col-sm-6 col-md-6 no-padding">
            <select id="hraList0.toMonth" name="hraList[0].toMonth" class="selectpicker" required="required" aria-required="true" style="display: none;" disabled="disabled">
               <option value="">Select</option>
               <option>Jan</option>
               <option>Feb</option>
               <option>Mar</option>
               <option>Apr</option>
               <option>May</option>
               <option>Jun</option>
               <option>Jul</option>
               <option>Aug</option>
               <option>Sep</option>
               <option>Oct</option>
               <option>Nov</option>
               <option>Dec</option>
               <option></option>
            </select>
            <div class="btn-group bootstrap-select">
               <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="hraList0.toMonth" title="Aug" value="" disabled="disabled"><span class="filter-option pull-left">Aug</span>&nbsp;<span class="caret"></span></button>
               <div class="dropdown-menu open">
                  <ul class="dropdown-menu inner selectpicker" role="menu">
                     <li data-original-index="0"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Select</span>"><span class="text">Select</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="1"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Jan</span>"><span class="text">Jan</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="2"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Feb</span>"><span class="text">Feb</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="3"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Mar</span>"><span class="text">Mar</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="4"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Apr</span>"><span class="text">Apr</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="5"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>May</span>"><span class="text">May</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="6"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Jun</span>"><span class="text">Jun</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="7"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Jul</span>"><span class="text">Jul</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="8" class="selected"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Aug</span>"><span class="text">Aug</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="9"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Sep</span>"><span class="text">Sep</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="10"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Oct</span>"><span class="text">Oct</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="11"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Nov</span>"><span class="text">Nov</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="12"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Dec</span>"><span class="text">Dec</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="13"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;></span>"><span class="text"></span><span class="glyphicon undefined check-mark"></span></a></li>
                  </ul>
               </div>
            </div>
         </div>
         <div class="col-sm-6 col-md-6 no-right-pad">
            <select id="hraList0.toYear" name="hraList[0].toYear" class="selectpicker" required="required" aria-required="true" style="display: none;" disabled="disabled">
               <option value="">Select</option>
               <option>2017</option>
               <option>2018</option>
            </select>
            <div class="btn-group bootstrap-select">
               <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="hraList0.toYear" title="2017" value="" disabled="disabled"><span class="filter-option pull-left">2017</span>&nbsp;<span class="caret"></span></button>
               <div class="dropdown-menu open">
                  <ul class="dropdown-menu inner selectpicker" role="menu">
                     <li data-original-index="0"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Select</span>"><span class="text">Select</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="1" class="selected"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>2017</span>"><span class="text">2017</span><span class="glyphicon undefined check-mark"></span></a></li>
                     <li data-original-index="2"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>2018</span>"><span class="text">2018</span><span class="glyphicon undefined check-mark"></span></a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

我不明白为什么第二个选择标签即将到来且哪个不可选。请帮我解决这个问题。 在此先感谢。

0 个答案:

没有答案