从文本文件的逗号分隔文本创建 javascript 中的下拉列表

Question

我有一个包含数据的文本文件(VMS.txt) A,B,C,D

所以我只想要这个逗号分隔的文本作为下拉列表的内容，因为我对 javascript 不是很熟悉，任何人都可以帮助我。

这是我的代码 (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>

所以在这里，当我单击添加按钮时，它显示类型为下拉列表，我想要 A、B、C 作为该下拉列表的内容，我尝试了所有方法，我只需要有人帮助。请帮我解决这个问题。

Answer 1

使用“fetch”加载文本文件的内容：

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

完整代码

<!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>

从文本文件的逗号分隔文本创建 javascript 中的下拉列表

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

javascript

dropdown

dropdownlistfor