javascript 添加新表单

Question

我已经创建了一个 html css javascript，当你选择一个选项时，另一个选项将是可见的(根据选择的第一个选项)在这个例子中只有 2 个选项。

问题是最后，有一个按钮应该添加一个具有相同选项的新表单(行)，重新开始，当我单击该按钮时它添加了新行但脚本不起作用，我不知道如何解决它!

这是一个JSFiddle

$("#addMore").click(function() {
  $(".row-fluid:last").clone().appendTo(".wrapper");
});

$("#produse").change(function() {
  var $this = $(this),
    value = $this.val(); // save value
  $('.sub_select_class').hide(); // we hide every second select
  switch (value) { // we show only what needs to be visible
    case 'Canapele':
      $("#ModeleCanapele").show();
      break;
    case 'Coltare':
      $("#ModeleColtare").show();
      break;
    case 'Mobila':
      $("#ModeleMobila").show();
      break;
    case 'Fotolii':
      $("#ModeleFotolii").show();
      break;
    case 'Seturi':
      $("#ModeleSeturi").show();
      break;
      // ...etc
  }
});

#ModeleColtare,
#ModeleSeturi {
  display: none;
}

.new-rect {
  background: black;
  width: 100%;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="row-fluid">
    <table style="font-size:10px">
      <tbody>
        <tr>
          <td>
            <select id="Volum">
              <option value="1x ">1x </option>
              <option value="2x ">2x </option>
              <option value="3x ">3x </option>
              <option value="4x ">4x </option>
              <option value="5x ">5x </option>
              <option value="6x ">6x</option>
            </select>
          </td>
          <td>
            <select id="produse">
              <option value="reset">Selecteaza Produs</option>
              <option value="Coltare">Coltare</option>
              <option value="Seturi">Seturi</option>
            </select>
          </td>
          <td>
            <select id="ModeleColtare" class="sub_select_class">
              <option value="Coltar Vera">Coltar Vera</option>
              <option value="Coltar Onix">Coltar Onix</option>
              <option value="Coltar Olyve">Coltar Olyve</option>
              <option value="Coltar Adrian">Coltar Adrian</option>
            </select>
          </td>
          <td>
            <select id="ModeleSeturi" class="sub_select_class">
              <option value="Set Dana">Set Dana</option>
              <option value="Set Ramona">Set Ramona</option>
              <option value="Set Gina">Set Gina</option>
              <option value="Set Olyve">Set Olyve</option>
            </select>
          </td>
          <td>
            Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
          <td>
            <button id="filter" name="filter" onclick="resetFunction()">Reset</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div>
  <button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>

Answer 1

问题是您正在生成一个新行，但仍然引用第一行(并且您是通过天真地使用 ID 来这样做的)。相反，您的代码一次只需要对特定行进行操作——因此，我编辑了您的代码以传递对该行的引用，然后我们可以使用相同的 JQuery 选择器，但从引用的行开始。

注意:其他一些人指责重复 ID 的使用，但显然这不是问题所在。事实上，您可以使用重复的 ID，在这种情况下这样做很常见。

明确地说，当前的 HTML 规范确实声明:

If the id value is not the empty string, it must be unique in a document. ref

但是，作为 separate stack exchange discussion notes ，实际情况并非如此(而且可能永远不会)。实际上，Id 只希望在一个范围内是唯一的，例如在可重用组件(即您的可克隆 <tr> )内。

$("#addMore").click(function() {
  var newRow = $(".row-fluid:last").clone();
  
  newRow.appendTo(".wrapper");
  
  newRow.find('.sub_select_class').hide();
  
  newRow.find( "#produse" ).change(function(){
    produseChange(this, newRow);
  });
});


$("#produse").change(function() {
  produseChange(this, $('tr')); 
});


function produseChange(self, row)  {
  var $this = $(self),
  value = $this.val(); // save value
  row.find('.sub_select_class').hide(); // we hide every second select
  switch (value) { // we show only what needs to be visible
    case 'Canapele':
      row.find("#ModeleCanapele").show();
      break;
    case 'Coltare':
      row.find("#ModeleColtare").show();
      break;
    case 'Mobila':
      row.find("#ModeleMobila").show();
      break;
    case 'Fotolii':
      row.find("#ModeleFotolii").show();
      break;
    case 'Seturi':
      row.find("#ModeleSeturi").show();
      break;
      // ...etc
  }
}

#ModeleColtare,
#ModeleSeturi {
  display: none;
}

.new-rect {
  background: black;
  width: 100%;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="row-fluid">
    <table style="font-size:10px">
      <tbody>
        <tr>
          <td>
            <select id="Volum">
              <option value="1x ">1x </option>
              <option value="2x ">2x </option>
              <option value="3x ">3x </option>
              <option value="4x ">4x </option>
              <option value="5x ">5x </option>
              <option value="6x ">6x</option>
            </select>
          </td>
          <td>
            <select id="produse">
              <option value="reset">Selecteaza Produs</option>
              <option value="Coltare">Coltare</option>
              <option value="Seturi">Seturi</option>
            </select>
          </td>
          <td>
            <select id="ModeleColtare" class="sub_select_class">
              <option value="Coltar Vera">Coltar Vera</option>
              <option value="Coltar Onix">Coltar Onix</option>
              <option value="Coltar Olyve">Coltar Olyve</option>
              <option value="Coltar Adrian">Coltar Adrian</option>
            </select>
          </td>
          <td>
            <select id="ModeleSeturi" class="sub_select_class">
              <option value="Set Dana">Set Dana</option>
              <option value="Set Ramona">Set Ramona</option>
              <option value="Set Gina">Set Gina</option>
              <option value="Set Olyve">Set Olyve</option>
            </select>
          </td>
          <td>
            Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
          <td>
            <button id="filter" name="filter" onclick="resetFunction()">Reset</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div>
  <button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>