HTML使用(nations .js)选择下拉国家和州

HTML select dropdown countries and states using (countries.js)

本文关键字：国家 选择 使用 nations js HTML      更新时间：2023-09-26

当前工作的HTML下拉列表中的国家和州与代码。我正在会见工作良好的国家和州的名单。当用户选择阿拉伯联合酋长国时，我的国家标签应该动态地更改为阿联酋。例如，如果我选择 swiss ，则州的标签应该更改为Canton。如何改变?

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");
  } 
});
});

当用户只选择United Arab Emirates时，此操作正常。

这个问题相当广泛，所以我将为您的研究提供一些线索。下面是您在菜单中处理国家更改的代码:

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

首先要做的是确保你的事件有效。将上面的内容改为:

if (stateElementId) {
  countryElement.onchange = function () {
    alert('Changed country');
    populateStates(countryElementId, stateElementId);
  };
}

我猜if()子句是错误的-在所有情况下都应该附加事件，而不仅仅是在提供选定状态时。但这取决于您的测试-确保alert()在所有情况下都应该触发。

接下来，您需要设置一些方法来读取每个国家给其内部部门的标签。您正在使用全局数组country_arr来表示国家，因此可能会设置label_arr或类似的数组，每个位置都包含"Canton"，"State"，"Department"，"Region"。您没有显示该数组的设置位置，因此只需在相同的位置设置新数组。

然后，您可以添加适当的代码来更改此事件处理程序中的标签。

请试一试，让我知道你进展如何。我建议您也清理代码缩进，因为这将使它更容易使用。

我有办法了

             $("#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");
            } 
        });

感谢这里支持我的人。

下面是我如何使用jQuery动态填充State和County下拉框的一次性示例——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);
    });
});
相关文章：