Question

我正在尝试动态制作combobox。现在我正在使用option标记并放置在select标记。

    <div>
              <select data-placeholder="Choose a Country..." class="chosen-select" tabindex="4">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
              </select>
            </div>

如何动态制作。我可以从JSON中获取它。如何以及在何处编写脚本中的函数。 1.如何从url获取数据并放入组合值。我想进入普通的javascript。

这是我的JSON数据

[
    {
        ID : 0,
        VALUE : "United State"
    },{
        ID : 1,
        VALUE : "United Kingdom"
    },{
        ID : 2,
        VALUE : "Afghanistan"
    },{
        ID : 3,
        VALUE : "Aland Islands"
    },{
        ID : 4,
        VALUE : "Albania"
    }
]

更新代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
  <link rel="stylesheet" href="docsupport/style.css">
  <link rel="stylesheet" href="docsupport/prism.css">
  <link rel="stylesheet" href="chosen.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://ajax.googleapis.com; style-src 'self'; img-src 'self' data:">
</head>
<body>
  <form>
    <div id="container">
      <div id="content">
        <div class="side-by-side clearfix">
        <div class="side-by-side clearfix">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <div>
              <select id="choose" data-placeholder="Choose a Country..." class="chosen-select" tabindex="4">
                <option value=""></option>

              </select>
            </div>
        </div>
        </div>
        </div>
    </div>
  </form>
</body>
<script>
var jsonc = [
    {
        ID : 0,
        VALUE : "United State"
    },{
        ID : 1,
        VALUE : "United Kingdom"
    },{
        ID : 2,
        VALUE : "Afghanistan"
    },{
        ID : 3,
        VALUE : "Aland Islands"
    },{
        ID : 4,
        VALUE : "Albania"
    }
];

var new_opt="";
for(i=0;i<jsonc.length;i++)
{


   new_opt+='<option value="'+jsonc[i]['VALUE']+'">'+jsonc[i]['VALUE']+'</option>';
}

document.getElementById('choose').innerHTML =new_opt;
</script>
</html>

Answer 1

1）我在选择框id="choose"中添加了id属性

＆＃13;

var jsonc = [
    {
        ID : 0,
        VALUE : "United State"
    },{
        ID : 1,
        VALUE : "United Kingdom"
    },{
        ID : 2,
        VALUE : "Afghanistan"
    },{
        ID : 3,
        VALUE : "Aland Islands"
    },{
        ID : 4,
        VALUE : "Albania"
    }
];

var new_opt="";
for(i=0;i<jsonc.length;i++)
{


   new_opt+='<option value="'+jsonc[i]['VALUE']+'">'+jsonc[i]['VALUE']+'</option>';
}

document.getElementById('choose').innerHTML =new_opt;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
              <select id="choose" data-placeholder="Choose a Country..." class="chosen-select" tabindex="4">
                <option value=""></option>
                
              </select>
            </div>

＆＃13;

Answer 2

使用您的JSON数据和属性var jsonc = [{ID: 0,VALUE: "United State"}, {ID: 1,VALUE: "United Kingdom"}, {ID: 2,VALUE: "Afghanistan"}, {ID: 3,VALUE: "Aland Islands"}, {ID: 4,VALUE: "Albania"}], selectBox = document.getElementById('choose'); jsonc.forEach(function (elem) { selectBox.options.add(new Option(elem.VALUE, elem.ID)); });，您可以遍历<select id="choose"> <option value="">Choose a Country...</option> </select>数组并添加如下所示的新选项：

＆＃13;

const getCounter = async id => {
    let counter = window[`counter${id}`];
    if (!counter) {
        let script = document.querySelectorAll(`[src="${STATS_URL}"]`);
        if (!script.length) {
            script = document.createElement('script');
            await new Promise(resolve => {
                script.onload = resolve;

                script.src = STATS_URL;
                document.head.appendChild(script);
            });
        }
        counter = window[`counter${id}`] = new window.Stats.createCounter({ id });
    }
    return counter;
};

＆＃13;

counter

＆＃13;

如何动态获取组合值

2 个答案: