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

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

javascript html properties

Javascript 如何从属性文件加载html下拉列表？,javascript,html,properties,Javascript,Html,Properties,如果有人能帮忙的话我有如下属性文件（db.properties）：- 我必须将这个值从属性文件加载到html文件中的下拉列表中下面是我的html文件：- <body> <p> Select the environment </p> <br> <select name="env"> <option value="DEV">DEV</option> <opti

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

我必须将这个值从属性文件加载到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之后）。

最好将此文件设置为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);
});

希望这有帮助

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);
});

使用jQuery使用ajax可以非常轻松地实现这一点，我在这里创建了一个演示

您的HTML

js

$（函数（）{
jQuery.ajax({
url:“db.properties”
}).完成（功能（数据）{
var options=data.split（/\n/）；
$（'select[name=“env”]”）html（“”）；
对于（i=0；i您可以使用jQuery使用ajax非常轻松地实现这一点，我在这里创建了一个演示
您的HTML
js
$（函数（）{
jQuery.ajax({
url:“db.properties”
}).完成（功能（数据）{
var options=data.split（/\n/）；
$（'select[name=“env”]”）html（“”）；
对于（i=0；i不要害怕使用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>


window.onload=函数（）{
var xhr=new XMLHttpRequest（），
dropdown=document.getElementById（“env”），
行=[]，i，计数，行，项目；
xhr.open（'GET'，'/db.properties'）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
if（xhr.responseText）{
dropdown.innerHtml=“”；
lines=xhr.responseText.split（'/\n | \r\n/'）；
对于（i=0，count=lines.length；i


不要害怕使用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>


window.onload=函数（）{
var xhr=new XMLHttpRequest（），
dropdown=document.getElementById（“env”），
行=[]，i，计数，行，项目；
xhr.open（'GET'，'/db.properties'）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
if（xhr.responseText）{
dropdown.innerHtml=“”；
lines=xhr.responseText.split（'/\n | \r\n/'）；
对于（i=0，count=lines.length；i


您可以使用Ajax来实现这一点，从db读取数据，并更新选项。@PanwenWang没有Ajax还有其他方法吗？因为我是这个web部件开发的新手，我对这些都不太了解stuffs@gurvinder372我尝试过这个方法，但对我无效：（为什么不能使用ajax？您可以使用ajax来实现这一点，从db读取数据，并更新选项。@PanwenWang不使用ajax还有其他方法吗？因为我是这个web部件开发的新手，我对这些都不太了解stuffs@gurvinder372我尝试过这个方法，但对我无效：（为什么你不能使用ajax？很抱歉，但我需要一个更简单的解决方案：（这个方法有点难吗？因为我是jsp和html的初学者。）很抱歉，我需要一个更简单的解决方案：（这个方法有点难吗？因为我是jsp和html的初学者
$(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>');
    }
  })

});

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