Question

目前使用代码处理HTML下拉国家/地区和州。我在国家和州的名单上工作正常。当用户选择阿拉伯联合酋长国时，我的国家标签应动态更改为阿联酋航空。例如，如果我选择 Swizerland ，则州的标签应更改为广州。如何改变？

Countries--Hong kong -- Area Code -- state label name
Countries--Switzerland -- Canton -- State label name

以下是菜单格式：

我已在脚本文件中为标签创建了另一个数组，该标签将动态更改

var label_arr = new Array("Prefucture","Emirate","UF","Area Code","Canton","Country","Province");

以下是填充州的当前代码：

function populateStates(countryElementId, stateElementId) {

var selectedCountryIndex =document.getElementById(countryElementId).selectedIndex;
alert("welcome to state" + selectedCountryIndex.value);

var stateElement = document.getElementById(stateElementId);

stateElement.length = 0;
stateElement.options[0] = new Option('Select State', '');
stateElement.selectedIndex = 0;

var state_arr = s_a[selectedCountryIndex].split("|");

for (var i = 0; i < state_arr.length; i++) {
    stateElement.options[stateElement.length] = new Option(state_arr[i], state_arr[i]);
}

}



 function populateCountries(countryElementId, stateElementId) {
// given the id of the <select> tag as function argument, it inserts     <option> tags
var countryElement = document.getElementById(countryElementId);
countryElement.length = 0;
countryElement.options[0] = new Option('Select Country', '');
countryElement.selectedIndex = 0;
for (var i = 0; i < country_arr.length; i++) {
    countryElement.options[countryElement.length] = new Option(country_arr[i], country_arr[i]);
}

// Assigned all countries. Now assign event listener for the states.

if (stateElementId) {
    countryElement.onchange = function () {
        populateStates(countryElementId, stateElementId);
    };
   }
  }

这是jQuery代码：

  $(document).ready(function (){
$("#country").on('change', function(){
  if( $('#country').val() == "United Arab Emirates" ){

    $('.dynamic_state').text("Emirates");
  }else{

    $('.dynamic_state').text("States");
  } 
});
});

当用户只选择阿拉伯联合酋长国时，此功能正常。

这是jsbin link。

Answer 1

我得到了解决方案

             $("#country").on('change', function(){
            if( $('#country').val() == "United Arab Emirates" ){                   
                $('.dynamic_state').text("Emirates");
            }else if( $('#country').val() == "Japan" ){
                $('.dynamic_state').text("Prefucture");
            }else{
                $('.dynamic_state').text("States");
            } 
        });

感谢在这里支持我的人们。

Answer 2

这是一个关于如何使用jQuery动态填充State和County drop box的一次性示例 - County依赖于State。我从一个pandas数据框开始，它在下面的HTML中转换为JSON。

HTML：

<div class="form-group">
    <label for="State">State:</label>
    <select class="form-control" id="State" name="State">
        <option disabled selected> -- Select a State -- </option>
    </select>
</div>
<div class="form-group">
    <label for="County">County:</label>
    <select class="form-control" id="County" name="County" disabled>
        <option selected> -- Select a County -- </option>
    </select>
</div>

<script>
    var state_county = {{ df.to_dict(orient='records') | tojson | safe }};
</script>

JS：

function extract_property(prop) {
    //Takes JSON
    //Returns array of prop where prop is 'State' or 'County'
    return function (e) {
        return e[prop]
    }
}

function populate_select(selector, list) {
    //take a select box name ('selector') and a list ('list')
    //append select option to 'selector' for each item in list
    var element = $(selector);
    // clear the select but leave ' -- Please select -- '
    element.html("<option disabled selected> -- Please select -- </option>");
    list.forEach(function (item) {
        element.append(
            $('<option>', {value: item}).text(item)
        );
    })
}


$(document).ready(function () {
    var states = $.unique(state_county.map(extract_property('State')));
    populate_select('#State', states);

    $("#State").change(function () {
        if ($(this).val() != "") {
            $("#County").removeAttr("disabled")
        }

        var state = $("#State").find("option:selected").text();
        var county = state_county.filter(function (e) {
            return e["State"] == state
        });
        var counties = $.unique(county.map(extract_property('County')));
        console.log(counties);
        populate_select('#County', counties);

    });
});

HTML选择下拉国家和州使用（countries.js）

2 个答案: