亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我正在嘗試使用 javascript 從 JSON 文件創建動態 html 選項

我正在嘗試使用 javascript 從 JSON 文件創建動態 html 選項

幕布斯6054654 2023-08-18 17:37:12
我正在嘗試創建一個 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,因此我們將不勝感激!
查看完整描述

1 回答

?
滄海一幻覺

TA貢獻1824條經驗 獲得超5個贊

該腳本會將您的數據轉換為下拉菜單中的兩步選擇


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>


查看完整回答
反對 回復 2023-08-18
  • 1 回答
  • 0 關注
  • 125 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號