代码之家 › 专栏 › 技术社区 › H C

用适当的索引适当地附加多个元素<div>

html jquery javascript

H C · 技术社区 · 7 年前

我有一个多元素和依赖div,它要求用户首先选择一个状态。一旦选择了该州,它将为用户提供该州合适的城市。

<form method="post">
  <div class="summary">
    <div class="trip">
      <select name="State" class="state">
        <option selected disabled>Choose a State</option>
        <option>California</option>
        <option>New York</option>
      </select>
      <select name="City" class="city" disabled="true">
        <option value="Z">Select a city</option>
      </select>
      <br><br>
    </div>
  </div>

jQuery:

$(document).ready(function() {
  $("#result").hide();
  $("form").on("change", "select", function(){
    var current = $(this).index();
    if($(this).eq(current).val() == 'Z') {
      $(".city").eq(current).html("<option>Select a city</option>");
      $(".city").eq(current).attr('disabled', true);
    }
    else {
      if($(this).eq(current).val() == 'California') {
        $(".city").eq(current).html("<option>San Francisco</option><option>Los Angeles</option>");
        $(".city option:first").eq(current).attr('selected', 'selected');
        $(".city").eq(current).attr('disabled', false);
      }
      if($(this).eq(current).val() == 'New York') {
        $(".city").eq(current).html("<option>New York City</option><option>Albany</option>");
        $(".city option:first").eq(current).attr('selected', 'selected');
        $(".city").eq(current).attr('disabled', false);
      }      

      }
      });
  var maxAppend = 0;
  $("#add").click(function() {
    if (maxAppend >= 4) return;
    var additional = $(".trip").html();
    $(".trip").after(additional);
    maxAppend++;
  });
});

我想允许用户最多添加四次类“trip”。当我使用append()或after()时,如上所示。新添加项的索引为1,这会导致在第一次行程中选择的重置,因为它具有相同的索引。实现这一点的正确和优雅的方式是什么?

以下是JSFIDLE的链接: https://jsfiddle.net/L2bfmo69/

1 回复 | 直到 7 年前

Shiladitya 7 年前

给你答案 https://jsfiddle.net/L2bfmo69/5/

$(document).ready(function() {
	var additional = $(".trip").html();
  $("#result").hide();
  $("form").on("change", "select", function(){
    var current = $(this).index();
    if($(this).eq(current).val() == 'Z') {
      $(".city").eq(current).html("<option>Select a fare</option>");
      $(".city").eq(current).attr('disabled', true);
    }
    else {
      if($(this).val() == 'California') {
        $(this).next().html("<option>San Francisco</option><option>Los Angeles</option>");
        $(this).next().attr('disabled', false);
      }
      if($(this).eq(current).val() == 'New York') {
        $(this).next().html("<option>New York City</option><option>Albany</option>");
        $(this).next().attr('disabled', false);
      }      
      
      }
      });
  var maxAppend = 0;
  $("#add").click(function() {
  	
    $(".summary").append('<div class="trip">' + additional + "</div>");
    if ($('.summary').children().length >= 4) {
      $('#add').prop('disabled', true);
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <div class="summary">
    <div class="trip">
      <select name="State" class="state">
        <option selected disabled>Choose a State</option>
        <option>California</option>
        <option>New York</option>
      </select>
      <select name="City" class="city" disabled="true">
        <option value="Z">Select a city</option>
      </select>
      <br><br>
    </div>
  </div>
  <div id="nexttrip"></div>
  <button type="button" id="add">Add another trip</button>
  <br><br>
  <input type="submit"> 
</form>

用户插入4次后,我禁用了添加按钮。