how to fix adding input not being double when selecting?-CodePudding

I'm stuck append double, I know the problem is that when I select the first I choose dynamic, when I change the second it selects static when I add the option button, why does the input become double?. how to fix append input not double. but if I first choose static and don't choose anything else, then not problem.

$(document).on('change', '#select-input-view', function(e) {
  e.preventDefault()
  let select = $(this).find(':selected').attr('data-input')
  arr_select = select.split("-")
  if (arr_select[1] == 'static') {
    document.getElementById('select-id-input-view-'   arr_select[2]).innerHTML = ``
    document.getElementById('select-id-input-view-'   arr_select[2]).innerHTML = `
                    <div id="static-option-${arr_select[2]}" >
                    <button id="add-option-select-view-${arr_select[2]}" >add option</button>
                    <button id="remove-option-select-view-${arr_select[2]}" >remove option</button>
                        <div id="view-option-${arr_select[2]}" >

                        </div>
                    </div>
                    `
    var num_option_insert = $('.data-div-option').length;
    $(document).on('click', '#add-option-select-view-'   arr_select[2], function(e) {
      e.preventDefault()
      thisid = this.id
      arr_id = thisid.split("-")
      num_option_insert  = 1
      option = `
                        <div id="option-div-view-${num_option_insert}-${arr_id[4]}" data-div-option="${num_option_insert}" >
                        <label >select option ${num_option_insert}</label>
                        <input name="123" type="text"  required>
                        </div>
                        `
      view_option = document.getElementById('view-option-'   arr_id[4])
      $(view_option).append(option)
    })

    // delete fields
    $(document).on('click', '#remove-option-select-view-'   arr_select[2], function(e) {
      e.preventDefault()
      thisid = this.id
      arr_id = thisid.split("-")
      console.log(arr_id)
      var row = $('#option-div-view-'   num_option_insert   '-'   arr_id[4]);
      row.remove();
      num_option_insert -= 1
    })
  } else {
    document.getElementById('select-id-input-view-'   arr_select[2]).innerHTML = ``
    document.getElementById('select-id-input-view-'   arr_select[2]).innerHTML = `
                    <div id="dynamic-option-1" >
                    <div >
                    <label >Select Data Dynamic</label>
                    <select name="select-dynamic"  required>
                    <option selected disabled>Select data dynamic</option>
                    <?php foreach ($table_database as $data) {
                        $table = $data->Tables_in_db_builder;
                        $arr = explode("_", $table);
                        if ($arr[0] != 'sys') {
                    ?>
                                        <option><?= $data->Tables_in_db_builder ?></option>
                                        <?php }
                                } ?>
                            </select>
                            </div>
                            </div>`
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-input-view" name="input-type" >
  <option>text</option>
  <option>number</option>
  <option>textarea</option>
  <option data-input="select-static-1">select static</option>
  <option data-input="select-dynamic-1">select dynamic</option>
  <option>float</option>
  <option>date</option>
</select>

<div id="select-id-input-view-1">

</div>

CodePudding user response：

Use event delegation so you only create listeners for the add-option and remove-option buttons once, not every time you add a new set of buttons.

Also, this line was wrong:

var num_option_insert = $('.data-div-option').length;

You have no data-div-option class, you have attributes like data-div-option="${num_option_insert}". The correct selector to match these elements is [data-div-option].

$(document).on('click', '.add-option-select-view', function(e) {
  e.preventDefault()
  var num_option_insert = $('[data-div-option]').length;
  thisid = this.id
  arr_id = thisid.split("-")
  num_option_insert  = 1
  option = `
                        <div id="option-div-view-${num_option_insert}-${arr_id[4]}" data-div-option="${num_option_insert}" >
                        <label >select option ${num_option_insert}</label>
                        <input name="123" type="text"  required>
                        </div>
                        `
  view_option = document.getElementById('view-option-'   arr_id[4])
  $(view_option).append(option)
})

// delete fields
$(document).on('click', '.remove-option-select-view', function(e) {
  e.preventDefault()
  var num_option_insert = $('[data-div-option]').length;
  thisid = this.id
  arr_id = thisid.split("-")
  console.log(arr_id)
  var row = $('#option-div-view-'   num_option_insert   '-'   arr_id[4]);
  row.remove();
  num_option_insert -= 1
})

$(document).on('change', '#select-input-view', function(e) {
  e.preventDefault()
  let select = $(this).find(':selected').attr('data-input')
  arr_select = select.split("-")
  if (arr_select[1] == 'static') {
    document.getElementById('select-id-input-view-'   arr_select[2]).innerHTML = `
                    <div id="static-option-${arr_select[2]}" >
                    <button id="add-option-select-view-${arr_select[2]}" >add option</button>
                    <button id="remove-option-select-view-${arr_select[2]}" >remove option</button>
                        <div id="view-option-${arr_select[2]}" >

                        </div>
                    </div>
                    `
  } else {
    document.getElementById('select-id-input-view-'   arr_select[2]).innerHTML = `
                    <div id="dynamic-option-1" >
                    <div >
                    <label >Select Data Dynamic</label>
                    <select name="select-dynamic"  required>
                    <option selected disabled>Select data dynamic</option>
                    <?php foreach ($table_database as $data) {
                        $table = $data->Tables_in_db_builder;
                        $arr = explode("_", $table);
                        if ($arr[0] != 'sys') {
                    ?>
                                        <option><?= $data->Tables_in_db_builder ?></option>
                                        <?php }
                                } ?>
                            </select>
                            </div>
                            </div>`
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-input-view" name="input-type" >
  <option>text</option>
  <option>number</option>
  <option>textarea</option>
  <option data-input="select-static-1">select static</option>
  <option data-input="select-dynamic-1">select dynamic</option>
  <option>float</option>
  <option>date</option>
</select>

<div id="select-id-input-view-1">

</div>