如何从属性文件加载html下拉列表

How to load dropdown list in html from a properties file?

本文关键字：html 下拉列表 加载 文件 从属性      更新时间：2023-09-26

如果有人能帮忙我有一个属性文件如下（db.properties）：-

1=DEV;
2=NATIVE;

我必须将这个值从属性文件加载到html文件中的下拉列表中下面是我的html文件：-

<body>
<p> Select the environment </p>
    <br>
    <select name="env">
        <option value="DEV">DEV</option>
        <option value="NATIVE">NATIVE</option>
    </select>
</body>

属性文件中的值应该自动进入HTML中的下拉列表中。即使在属性文件中添加了新值，该值也应显示在下拉列表中。

有人能建议一些代码做同样的事情吗？这将非常有帮助

谢谢：）

最好这个文件是json格式，但您可以使用XMLHttpRequest下载它（它必须在同一服务器上，关于同源策略），使用split（"="）进行解析，并通过appendChild和innerHTML修改DOM树。如果您想进行实时更改，可以使用setTimeout（第一次在DOMContentLoaded中，随后在修改SELECT之后）。

希望这能有所帮助。

oo = {};
oo.refreshInterval = 1000;
oo.fileToRequest = 'config.txt';
oo.loadList = function() {
    var req = new XMLHttpRequest();
    var lines;
    var select = document.querySelector('select:first-of-type');
    req.onreadystatechange = function() {
      if (req.readyState == 4 && req.status == 200) {
        lines = req.responseText.split(''n');
        while (select.firstChild) {
          select.removeChild(select.firstChild);
        }
        lines.forEach(function(value) {
          var describer = value.split('=')[1];
          var option = document.createElement('option');
          var text = 
            document.createTextNode(
                       describer.substr(0, describer.length - 1)
                     );
          option.appendChild(text);
          select.appendChild(option);
        });
      }
    }
    req.open('get', oo.fileToRequest);
    req.send(null);
}
window.addEventListener('load', function() {      
  oo.loadList();
  // Refresh the select box.
  setInterval(oo.loadList, oo.refreshInterval);
});

使用ajax using jQuery您可以非常轻松地完成此操作。我在这里创建了一个演示http://plnkr.co/edit/7PbH8AdQxGc9RGmxslkr?p=preview

Your HTML

<p> Select the environment </p>
<br>
<select name="env"></select>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

Your db.properties file

1=DEV;
2=NATIVE;

js

$(function(){
  jQuery.ajax({
    url: "db.properties"
  }).done(function(data){
    var options = data.split(/'n/);
    $('select[name="env"]').html('');
    for (i=0; i<options.length; i++) {
      console.log(options[i].split('='));
      var optionVal = options[i].split('=').pop().replace(';', "");
      $('select[name="env"]').html('<option value="'+ optionVal +'">'+ optionVal +'</option>');
    }
  })
});

不要害怕使用Ajax，它非常简单：

<script>
    window.onload = function(){
        var xhr = new XMLHttpRequest(),
            dropdown = document.getElementById("env"),
            lines = [], i, count, line, item;
            xhr.open('GET', '/db.properties');
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                   if (xhr.responseText) {
                      dropdown.innerHtml = "";
                      lines = xhr.responseText.split('/'n|'r'n/');
                      for(i=0,count = lines.length; i < count; i+ = 1){
                          line = lines[i].split('=');
                          item = document.createElement('option');
                          item.text = line[1];
                          item.value = line[0];
                          dropdown.appendChild(item);
                      }                    
                   }
                }
            }
            xhr.send();
    }
</script>
<body>
  <p> Select the environment </p>
  <br>
  <select name="env" id="env">
  </select>
</body>
相关文章：