1

I have created a html css javascript, a tree when you select an option, another options will be visible (according the first option selected) in this example there is only 2 options.

the problem is that at the end, there is a button that should add a new form (row) with same options, to start all over, when i click that button it add new row but the script doesn't work, I have no idea how to fix it!

Here is a 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>
20yco
  • 876
  • 8
  • 28
Pirjol Nelu
  • 67
  • 5
  • Welcome to Stack Overflow. In it's current form your question is unlikely to receive much in the way of helpful responses. Please read the articles in the help center regarding how to ask a good question. In particular, you might want to explain exactly what isn't working, _"but the script doesnt work, i got no idea how to fix it"_ doesn't help anyone understand what is happening. – Chris Pickford Jan 17 '19 at 16:16
  • 1
    Every row has a select with ID "produse". Id is meant to be unique per element on a page. Use class instead. – Nawed Khan Jan 17 '19 at 16:17
  • @ChrisPickford It was clear to me. – mplungjan Jan 17 '19 at 16:18
  • https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – epascarello Jan 17 '19 at 16:26
  • i understand what you said, the problem is i wont be able to add more classes.the script wont work – Pirjol Nelu Jan 17 '19 at 16:33
  • Pirjol, each element needs to have an attribute attached OR some sort of "container" for the row that designates what row number it is. Or you can use child nth to select a specific row. You can dynamically do it by using classes & then when a select (produse) is changed, finding out how many rows are above it & then selecting the other elements by using their class name (NOT ID) & row number (child nth) – Nerdi.org Jan 17 '19 at 16:37

2 Answers2

0
  1. IDs need to be unique. Use a class
  2. You need to delegate the event handlers when you insert dynamic content
  3. DRY, don't repeat yourself

function resetFunction() { // not sure what you want here? 
  $(this).closest(".row-fluid").remove(); 
}

$(function() {
  $("#addMore").click(function() {
    var $clone = $(".row-fluid:last").clone(true)
    $('.sub_select_class',$clone).hide(); // we hide every second select    
    $clone.appendTo(".wrapper");
  });

  $(".row-fluid").on("click",".filter", resetFunction);

  $(".row-fluid").on("change", ".produse", function() {
    var value = $(this).val(), // save value
        $parent = $(this).closest(".row-fluid");
    $('.sub_select_class',$parent).hide(); // we hide every second select
    $(".Modele" + value,$parent).show();
  });
});
.sub_select_class {
  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 class="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 class="produse">
              <option value="reset">Selecteaza Produs</option>
              <option value="Coltare">Coltare</option>
              <option value="Seturi">Seturi</option>
            </select>
          </td>
          <td>
            <select class="ModeleColtare 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 class="ModeleSeturi 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 class="filter" name="filter">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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

The problem is that you were generating a new row, but still referencing the first row (and you were doing so via your naive use of Ids). Instead, your code needs to operate only upon a specific row at a time -- so, I've edited your code to pass in a reference to the row, then we can use your same JQuery Selectors, but starting from the referenced row.

NOTE: Several others have been blaming the use of duplicate Ids, but clearly that is not the problem. The fact is you CAN use duplicate Ids, and it is common to do so in situations like this.

To be clear, current HTML specification does state that:

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

But, as a separate stack exchange discussion notes, this is not the case in practice (and probably never will be). In practice, Id is only expected to be unique within a scope, such as within a reusable component (i.e., your cloneable <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>
Design.Garden
  • 3,607
  • 25
  • 21
  • i have edited the BIG script and seems first row works like a charm, but when i add a new row still not working - https://jsfiddle.net/te7hxzbd/1/ – Pirjol Nelu Jan 17 '19 at 16:59
  • I just tried your jsfiddle, and I was able to add more rows without a problem. How is it not working? – Design.Garden Jan 17 '19 at 17:04
  • if you select on the first row for exemple canapele then you select canapea dana, some other options apear but if you add a new row and do the same, it wont work – Pirjol Nelu Jan 17 '19 at 17:25
  • Okay, I see. You continue to make your original mistake with the remaining .change events. You will have to adapt my solution to the rest of your code, i.e. $("#ModeleMobila").change(...) has to become newRow.find("#ModeleMobila").change(...). So, just make sure you clearly understand what my code is doing, then you can finish your remaining code yourself – Design.Garden Jan 17 '19 at 17:37