creating a drop down list in javascript from comma delimited text of a text file

I have a text file(VMS.txt) containing data A,B,C,D

So i just want this comma delimited text as content of dropdown list , since i am not so familier with javascript , can anyone kindly help me with that .

So here is my code (Index.php)

<script>
$(document).ready(function(){
    $(document).on('click', '.add', function(){
    var html = '';
    html += '<tr>';
    html += '<td><input type="text" name="VMName[]" class="form-control Vmname" /></td>';
    html += '<td><select name="Type[]"  id="VMName" class="form-control type"><option value="base" >Select Type</option>';
    html +='</select>';
    html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
    $('#item_table').append(html);
    });
  
    $(document).on('click', '.remove', function(){
        $(this).closest('tr').remove();
        });
    });

</script>

So here when i click Add button it shows Type as dropdown list , i want A ,B, C as content of that drop down list , i tried everything , i just want someones help . Kindly help me with this .

Solution

Use "fetch" to load contents of text file:

fetch('http://localhost/VMS.txt')
  .then(response => response.text())
  .then((data) => {
    console.log(data)
  }

Full code

<!DOCTYPE html>
<html>
 <head>
  <title>Add Remove Select Box Fields Dynamically using jQuery Ajax in PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br />
  <div class="container">
   <form method="post" id="insert_form">
    <div class="table-repsonsive">
     <span id="error"></span>
     <table class="table table-bordered" id="item_table">
      <tr>
       <th>Name</th>
       <th>Type</th>
       <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
      </tr>
     </table>
     <div align="center">
      <input type="submit" name="submit" class="btn btn-info" value="Generate Report" />
     </div>
    </div>
   </form>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
    
    $(document).on('click', '.add', function(){
        loadTxt();
    });
  
    $(document).on('click', '.remove', function(){
            $(this).closest('tr').remove();
        });
    });
    
function loadTxt()
{
    fetch('http://probe/js/stack/load_txt/VMS.txt')
        .then(response => response.text())
            .then((data) => {
                renderSelect(data);
            })
}

function renderSelect(data)
{
    
    var html = '';
    
    var dataA = data.split(',');
    
    html += '<tr>';
    html += '<td><input type="text" name="VMName[]" class="form-control Vmname" /></td>';
    html += '<td><select name="Type[]"  id="VMName" class="form-control type"><option value="base" >Select Type</option>';
    
    $.each(dataA, function(ind,value){
        html += '<option value="'+value+'" >'+value+'</option>';
    })
    
    html +='</select>';
    html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
    $('#item_table').append(html);
    
}  

</script>