我正在尝试使用 javascript 从 JSON 文件创建动态 html 选项

Question

我正在尝试创建一个 html 表单，其中有两个动态选项下拉列表（第二个的值取决于第一个）。然后，第二个选项的值将输入到提交按钮（一个链接）中。按钮的数据来自 JSON 文件。我知道我必须使用 JS 和 JQUERY 来实现这一点，但我不太擅长 JS。

我想要的第一个选项的输出如下：

<select id="first_choice">

  <option selected value="base">Please Select Country</option>

  <!-- Appended options -->

  <option value="Afghanistan">Afghanistan</option>

  <option value="France">France</option>

  <option value="United Arab Emirates">United Arab Emirates</option>

  <option selected value="United Kingdom">United Kingdom</option>

</select>

例如，如果选择“阿拉伯联合酋长国”，则应按如下方式过滤/填充第二个下拉列表：

<select id="second-choice">

  <option selected>Please Select Language</option>

  <!-- Appended options -->

  <option value="https://www.mysite.ae/lang=ar">Arabic</option>

  <option value="https://www.mysite.ae/lang=en">English</option>

  <option value="https://www.mysite.ae/lang=hi">Hindi</option>

  <option value="https://www.mysite.ae/lang=fa">Persian</option>

  <option value="https://www.mysite.ae/lang=ur">Urdu</option>

</select>

然后，第二个选项的值将用于提交，这将是一个链接。

我的 JSON 文件的格式如下：

{

"Afghanistan":{

    "Persian":"https://www.mysite.af/lang=fa",

    "Pushto":"https://www.mysite.af/lang=ps",

    "Pashto":"https://www.mysite.af/lang=ps"

},

"Albania":{

    "Albanian":"https://www.mysite.al/lang=sq",

    "English":"https://www.mysite.al/lang=en"

},

"United Kingdom of Great Britain and Northern Ireland":{

    "English":"https://www.mysite.co.uk/lang=en"

},

"United Arab Emirates":{

    "Arabic":"https://www.mysite.ae/lang=ar",

    "English":"https://www.mysite.ae/lang=en",

    "Hindi":"https://www.mysite.ae/lang=hi",

    "Persian":"https://www.mysite.ae/lang=fa",

    "Urdu":"https://www.mysite.ae/lang=ur"

}

正如我所说，我不太擅长 Javascript，因此我们将不胜感激！

Answer 1

该脚本会将您的数据转换为下拉菜单中的两步选择var data = {&nbsp; &nbsp; "Afghanistan": {&nbsp; &nbsp; &nbsp; &nbsp; "Persian": "https://www.mysite.af/lang=fa",&nbsp; &nbsp; &nbsp; &nbsp; "Pushto": "https://www.mysite.af/lang=ps",&nbsp; &nbsp; &nbsp; &nbsp; "Pashto": "https://www.mysite.af/lang=ps"&nbsp; &nbsp; },&nbsp; &nbsp; "Albania": {&nbsp; &nbsp; &nbsp; &nbsp; "Albanian": "https://www.mysite.al/lang=sq",&nbsp; &nbsp; &nbsp; &nbsp; "English": "https://www.mysite.al/lang=en"&nbsp; &nbsp; },&nbsp; &nbsp; "United Kingdom of Great Britain and Northern Ireland": {&nbsp; &nbsp; &nbsp; &nbsp; "English": "https://www.mysite.co.uk/lang=en"&nbsp; &nbsp; },&nbsp; &nbsp; "United Arab Emirates": {&nbsp; &nbsp; &nbsp; &nbsp; "Arabic": "https://www.mysite.ae/lang=ar",&nbsp; &nbsp; &nbsp; &nbsp; "English": "https://www.mysite.ae/lang=en",&nbsp; &nbsp; &nbsp; &nbsp; "Hindi": "https://www.mysite.ae/lang=hi",&nbsp; &nbsp; &nbsp; &nbsp; "Persian": "https://www.mysite.ae/lang=fa",&nbsp; &nbsp; &nbsp; &nbsp; "Urdu": "https://www.mysite.ae/lang=ur"&nbsp; &nbsp; }}var firstChoice = document.getElementById('first_choice');var first = Object.keys(data);for (var i = 0; i < first.length; i++) {&nbsp; &nbsp; firstChoice.innerHTML += '<option value="' + first[i] + '">' + first[i] + '</option>';}firstChoice.addEventListener("change", function () {&nbsp; &nbsp; if (this.value.length > 0) {&nbsp; &nbsp; &nbsp; &nbsp; secondDropDown(this.value);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; var sec = document.getElementById('second_choice');&nbsp; &nbsp; &nbsp; &nbsp; sec.innerHTML = '';&nbsp; &nbsp; }});function secondDropDown(x) {&nbsp; &nbsp; var sec = document.getElementById('second_choice');&nbsp; &nbsp; sec.innerHTML = '<option selected>Please Select Language</option>';&nbsp; &nbsp; var y = data[x];&nbsp; &nbsp; for (const [key, value] of Object.entries(y)) {&nbsp; &nbsp; &nbsp; &nbsp; sec.innerHTML += '<option value="' + value + '">' + key + '</option>';&nbsp; &nbsp; }}<select id="first_choice">&nbsp; &nbsp; <option selected value="">Please Select Country</option>&nbsp; &nbsp; <!-- Appended options --></select><select id="second_choice"></select>