显示国家/地区城市名称并在两个字段中仅显示国家名称答案

【问题标题】：Display country state city names and display only country name in two fields显示国家/地区城市名称并在两个字段中仅显示国家名称
【发布时间】：2020-03-05 06:15:56
【问题描述】：

如何显示国家/地区城市名称。我发现的结果是在其余两个字段中只显示国家名称。

<html>
<head>
    <title>dispaly country state district/title>
    <link rel="stylesheet" href="coun.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script>
        var stateObject = {
        "India": { "AndhraPradensh": ["Guntur", "ananthapur","kurnool","krishna","kadapa"],
        "Kerala": ["Thiruvananthapuram", "Palakkad"],
        "Goa": ["North Goa", "South Goa"],
        },
        "The United States of America": {
        "califonia": ["California’s 34th congressional district", "California’s 38th congressional district"],
        "Florida": ["Florida"]
        }, "Canada": {
        "Alberta": ["Acadia", "Bighorn"],
        "Columbia": ["Washington DC"]
        },
        }
        window.onload = function ()
        {
            var countySel = document.getElementById("countySel"),
                stateSel = document.getElementById("stateSel"),
                districtSel = document.getElementById("districtSel");
            for (var country in stateObject) 
            {
                countySel.options[countySel.options.length] = new Option(country, country);
            }
            countySel.onchange = function ()
            {
                stateSel.length = 1; 
                districtSel.length = 1; 
                if (this.selectedIndex < 1) return; 
                for (var state in stateObject[this.value]) 
                {
                    stateSel.options[stateSel.options.length] = new Option(state, state);
                }
            }
            countySel.onchange();
            stateSel.onchange = function () 
            {
                districtSel.length = 1;
                if (this.selectedIndex < 1) return;  
                var district = stateObject[countySel.value][this.value];
                for (var i = 0; i < district.length; i++) {
                districtSel.options[districtSel.options.length] = new Option(district[i], district[i]);
            }
        }
        }
    </script>

功能无法正常工作。问题是选择的用户没有正确显示或存储。

    <script LANGUAGE="JavaScript" type="text/javascript">
        function display()
        {   
                var j=document.getElementById("countySel").selectedIndex;
                var k=document.getElementsByTagName("option")[j].value;
                var l=document.getElementById("stateSel").selectedIndex;
                var m=document.getElementsByTagName("option")[l].value;
                var n=document.getElementById("districtSel").selectedIndex;
                var o=document.getElementsByTagName("option")[n].value;
                var siva=document.getElementById("sai");
                var displaysetting=siva.style.display;
                if (typeof(Storage) !== "undefined")
                {
                    localStorage.setItem('country',k)
                    localStorage.setItem('state',m)
                    localStorage.setItem('district',o)
                    if(displaysetting == "block")
                    {   

                        siva.style.display='none';
                        inputfields.style.display='block';
                        document.getElementById("country1").innerHTML=localStorage.getItem('country');
                        document.getElementById("state1").innerHTML=localStorage.getItem('state');
                        document.getElementById("district1").innerHTML=localStorage.getItem('district');

                    }
                     else
                    {
                        siva.style.display='block';
                    }

                }
                else 
                {
                    document.getElementById("name1").innerHTML = "Sorry, your browser does not support Web Storage...";
                }
                }
        </script>
</head>
<body>
    <form class="container" id="sai"  style="display: block;"  >
        <div class="row">
            <div class="form-group col-4">
                <label>Select Country:</label>
                <select name="state" id="countySel"  class="form-control" size="1">
                    <option value="" selected="selected"  >Select Country</option>
                </select>
            </div>
            <div class="form-group col-4">
                <label>Select State:</label>
                <select name="country" id="stateSel"  class="form-control" size="1">
                    <option value="" selected="selected"  >Please select Country first</option>
                </select>
            </div>
            <div class="form-group col-4">
                <label>Select District:</label>
                <select name="district" id="districtSel"  class="form-control" size="1">
                    <option value="" selected="selected">Please select State first</option>
                </select>
            </div>
            <div class="form-group">
                <button class="btn btn-secondary" type="submit" value="submit" onclick="display()" style="width: 100px;">SUBMIT</button>
            </div>
        </div>
    </form>
    <div class="container" id="inputfields" style="margin-top: 15px; display: none;">
        <div class="row">
            <div class="col-6">
                <div id="img" style="width: 350px; height: 350px;">

                </div>

            </div>
            <div class="col-6">
                <div> COUNTRY: <p id="country1"></p></div>
                <div> STATE: <p id="state1"></p></div>
                <div> DISTRICT: <p id="district1"></p></div>

            </div>
        </div>
    </div>
</body>

我尝试了很多，但我没有找到我做错的地方。有谁能解决这个问题。

【问题讨论】：

在问题正文中陈述您的问题。不在标题中。其次，在强调某事时请不要使用大写字母。第三，使用工作代码 sn-p 重现您当前的情况。不要只是粘贴一堆代码。
提示：document.getElementsByTagName("option") 按页面结构顺序选择页面上的所有选项，包括来自其他下拉字段的选项。
更好的标题、文字、代码和图片

标签： javascript html css bootstrap-4

【解决方案1】：

你可以像这样修改你的 display() 函数：

let selectedCountryIndex=document.getElementById("countySel").selectedIndex;
let selectedStateIndex=document.getElementById("stateSel").selectedIndex;
let selectedDistrictIndex=document.getElementById("districtSel").selectedIndex;
let opt1 = document.getElementById("countySel").options[selectedCountryIndex].value;
let opt2 = document.getElementById("stateSel").options[selectedStateIndex].value;
let opt3 = document.getElementById("districtSel").options[selectedDistrictIndex].value;

【讨论】：

代码正在运行，非常感谢@alexey Eremin 先生