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

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  = "" +
                "
" +
                "Add" +
                "Remove
";
            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($('

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

user_10606400 · Answer

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 = "" +
    "
" +
    "Add" +
    "Remove
";
  $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($('




  
    Select list name
      
    
    
      
      
    
    
    Add Values

Jquery : Creating Dynamic Select list

1 Answers