Jquery : Creating Dynamic Select list

Question

i am creating a select list dynamically where user can add options after adding select list. Below is my code

 <script type="text/html" id="select_field">
       <div class='row'>
           <div class='col-md-3'><label>Select list name</label>
              <div class='form-group'><input type='text' class='form-control select_name'></div>
           </div>
           <div class="col-md-3">
                <label for=""></label>
                 <select name=""  class="form-control select-list" ></select>
            </div>
           <div class="append_list"></div>
          <a  class="btn btn-primary pull-right add_values">Add Values</a>
     </div>
 </script>

JS:

Below JS adds an text field with 2 buttons option to add / remove field to the select list

$form_holder.on('click','.add_values', e => {
            var html  = "<div class='clearfix'></div>" +
                "<div class='col-md-4'><input type='text' class='form-control add_select_option' name='add_value' ><br>" +
                "<a class='add_option btn btn-default' value='Add' >Add</a>" +
                "<a class='remove_option btn btn-danger'  value='Remove'  >Remove</a><br></div>";
            let $target = $(e.target);
            let $value= e.target.value;
            let $div = $target.closest('.row').find('.append_list');
            $div.append(html);

        });

Below Code adds an option to the select list :

  $form_holder.on('click','.add_option', e => {
            let $target = $(e.target);
            console.log($target);
            let $value= e.target.value;
            let $value_toadd = $target.closest('.col-md-4').find('.form-control').val();
            console.log($value_toadd);
            let $select_list = $target.closest('.row').find('.select-list');
            $($select_list).append($('<option>', {
                value: $value_toadd,
                text: $value_toadd
            }));

        });

Now values are added successfully , but my problem is that ::

if I have added value using one text field and click on add button again it embeds new value to the select list using the same text field, how do i uniquely identify each of the text fields while adding entries to select list , please advise .

I also have to use same unique value to remove the entry from the select list

Answer 1

You can give custom attribute to your inputs i.e : data-id . Then , whenever user click on add button check if the custom attr is already present in one of the option of select if yes show some message else add new data to selects .

Demo Code :

var $form_holder = $("form")
$form_holder.on('click', '.add_values', e => {
  let $target = $(e.target);
  let $value = e.target.value;
  let $div = $target.closest('.row').find('.append_list');
  //add custom attr
  var html = "<div class='clearfix'></div>" +
    "<div class='col-md-4'><input type='text' class='form-control add_select_option' name='add_value' data-id='" + $div.find(".col-md-4").length + "'><br>" +
    "<a class='add_option btn btn-default' value='Add' >Add</a>" +
    "<a class='remove_option btn btn-danger'  value='Remove'  >Remove</a><br></div>";
  $div.append(html);

});

$form_holder.on('click', '.add_option', e => {
  let $target = $(e.target);
  let $value = e.target.value;
  var data_id = $target.closest('.col-md-4').find('.form-control').data('id'); //get custom attr added
  let $value_toadd = $target.closest('.col-md-4').find('.form-control').val();
  let $select_list = $target.closest('.row').find('.select-list');
  //check if select doesn't have that data-id
  if ($select_list.find("option[data_value=" + data_id + "]").length <= 0) {
    //then only add
    $($select_list).append($('<option>', {
      data_value: data_id,
      value: $value_toadd,
      text: $value_toadd
    }));
  } else {

    console.log(" already there ")
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class='row'>
    <div class='col-md-3'><label>Select list name</label>
      <div class='form-group'><input type='text' class='form-control select_name'></div>
    </div>
    <div class="col-md-3">
      <label for=""></label>
      <select name="" class="form-control select-list"></select>
    </div>
    <div class="append_list"></div>
    <a class="btn btn-primary pull-right add_values">Add Values</a>
  </div>

</form>