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

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

如何使用JQuery填充級聯下拉列表

如何使用JQuery填充級聯下拉列表

如何使用JQuery填充級聯下拉列表我有以下問題:我開始用HTML和JS創建一個表單,有兩個Dropdown(Country和City)?,F在我想用JQuery創建這兩個動態,以便只有所選國家/地區的城市可見。我已經開始使用一些基本的JS工作正常,但在IE中遇到了麻煩?,F在我正在嘗試將我的JS轉換為JQuery以獲得更好的兼容性。我原來的JS看起來像這樣:function populate(s1, s2) {     var s1 = document.getElementById(s1);     var s2 = document.getElementById(s2);     s2.innerHTML = "";     if (s1.value == "Germany") {         var optionArray = ["|", "magdeburg|Magdeburg", "duesseldorf|Duesseldorf", "leinfelden-echterdingen|Leinfelden-Echterdingen", "eschborn|Eschborn"];     } else if (s1.value == "Hungary") {         var optionArray = ["|", "pecs|Pecs", "budapest|Budapest", "debrecen|Debrecen"];     } else if (s1.value == "Russia") {         var optionArray = ["|", "st. petersburg|St. Petersburg"];     } else if (s1.value == "South Africa") {         var optionArray = ["|", "midrand|Midrand"];     } else if (s1.value == "USA") {         var optionArray = ["|", "downers grove|Downers Grove"];     } else if (s1.value == "Mexico") {         var optionArray = ["|", "puebla|Puebla"];     } else if (s1.value == "China") {         var optionArray = ["|", "beijing|Beijing"];     } else if (s1.value == "Spain") {         var optionArray = ["|", "barcelona|Barcelona"];     }     for (var option in optionArray) {         var pair = optionArray[option].split("|");         var newOption = document.createElement("option");         newOption.value = pair[0];         newOption.innerHTML = pair[1];         s2.options.add(newOption);     }};在這里我的Jquery:http://jsfiddle.net/HvXSz/我知道這很簡單,但我看不到樹木。
查看完整描述

3 回答

?
Smart貓小萌

TA貢獻1911條經驗 獲得超7個贊

它應該如此簡單

jQuery(function($) {
    var locations = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
        'South Africa': ['Midrand'],
        'China': ['Beijing'],
        'Russia': ['St. Petersburg'],
    }

    var $locations = $('#location');
    $('#country').change(function () {
        var country = $(this).val(), lcns = locations[country] || [];

        var html = $.map(lcns, function(lcn){
            return '<option value="' + lcn + '">' + lcn + '</option>'
        }).join('');
        $locations.html(html)
    });});

演示:小提琴


查看完整回答
反對 回復 2019-07-27
?
qq_花開花謝_0

TA貢獻1835條經驗 獲得超7個贊

我為Country,State,City和Zip創建了級聯下拉列表

它可能對某人有幫助。這里只發布了部分代碼,你可以在jsfiddle上看到完整的工作示例。

//Get html elementsvar countySel = document.getElementById("countySel");var stateSel = document.getElementById("stateSel"); var citySel = document.getElementById("citySel");var zipSel = document.getElementById("zipSel");//Load countriesfor (var country in countryStateInfo) {
    countySel.options[countySel.options.length] = new Option(country, country);}//County ChangedcountySel.onchange = function () {

     stateSel.length = 1; // remove all options bar first
     citySel.length = 1; // remove all options bar first
     zipSel.length = 1; // remove all options bar first

     if (this.selectedIndex < 1)
         return; // done

     for (var state in countryStateInfo[this.value]) {
         stateSel.options[stateSel.options.length] = new Option(state, state);
     }}

Fiddle Demo


查看完整回答
反對 回復 2019-07-27
  • 3 回答
  • 0 關注
  • 670 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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