我正在尝试使用 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 = {

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

    }

}

var firstChoice = document.getElementById('first_choice');

var first = Object.keys(data);

for (var i = 0; i < first.length; i++) {

    firstChoice.innerHTML += '<option value="' + first[i] + '">' + first[i] + '</option>';

}

firstChoice.addEventListener("change", function () {

    if (this.value.length > 0) {

        secondDropDown(this.value);

    } else {

        var sec = document.getElementById('second_choice');

        sec.innerHTML = '';

    }

});

function secondDropDown(x) {

    var sec = document.getElementById('second_choice');

    sec.innerHTML = '<option selected>Please Select Language</option>';

    var y = data[x];

    for (const [key, value] of Object.entries(y)) {

        sec.innerHTML += '<option value="' + value + '">' + key + '</option>';

    }

}

<select id="first_choice">

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

    <!-- Appended options -->

</select>

<select id="second_choice">

</select>