将第一个选择项从第一个选择的选项具体化吗？

Question

我使用物化，问题是：我有2个select-div选项，当我在第一个选择中选择Ukranine时？第二个选择只会向我显示利沃夫，敖德萨，基辅，哈尔科夫。如果我在第一选择中选择波兰，则第二选择仅显示华沙和克拉科夫。我已经问过同样的问题，并没有收到什么有用的答案，但是当我链接实现CSS时，代码不起作用。

<div class="input-field col s12">
    <select id="country-list" onchange="changeCountry(this)">
        <option value="none" disabled selected>Choose your option</option>
        <option value="1">Ukraine </option>
        <option value="2">Poland</option>
    </select>
</div>

<div class="input-field col s12">
    <select id="city-list">
        <option value="none" disabled selected>Choose your option</option>
        <option value="1">Lviv</option>
        <option value="1">Kiev</option>
        <option value="1">Kharkiv</option>
        <option value="1">Odessa</option>
        <option value="2">Krakow</option>
        <option value="2">Warsaw</option>
    </select>
</div>

这里是javascript

var countryObject = {
    Ukraine: ["Lviv", "Kiev", "Kharkiv", "Odessa"],
    Poland: ["Krakow", "Warsaw"],
};

function changeCountry() {
    document.getElementById("city-list").options.length = 0;

    var cityListArray =
        countryObject[document.getElementById("country-list").value];
    console.log(document.getElementById("city-list").options);

    for (var item = 0; item < cityListArray.length; item++) {
        document.getElementById("city-list").options[
            document.getElementById("city-list").options.length
        ] = new Option(cityListArray[item], cityListArray[item]);
    }
}

Answer 1

无需连续查找页面上的元素。找到它们一次，然后在需要时使用所得元素。

const countryObject = {
    Ukraine: ["Lviv", "Kiev", "Kharkiv", "Odessa"],
    Poland: ["Krakow", "Warsaw"],
};

const countryListEl = document.getElementById("country-list");
const cityListEl = document.getElementById("city-list");
const defaultOption = new Option("Choose your option");
defaultOption.disabled = true;
defaultOption.selected = true;

function changeCountry() {
    cityListEl.options.length = 0;
    cityListEl.options[0] = defaultOption;

    const cityListArray = countryObject[countryListEl.value];

    for (let i = 0; i < cityListArray.length; i++) {
        cityListEl.options[i+1] = new Option(cityListArray[i], cityListArray[i]);
    }
}

<div class="input-field col s12">
	<select id="country-list" onchange="changeCountry(this)">
		<option value="none" disabled selected>Choose your option</option>
		<option value="Ukraine">Ukraine </option>
		<option value="Poland">Poland</option>
	</select>
</div>

<div class="input-field col s12">
	<select id="city-list">
		<option value="none" disabled selected>Choose your option</option>
	</select>
</div>

Answer 2

我用您的国家/地区名称更改了您的国家/地区的值并编辑了您的功能

var countryObject = {
  "Ukraine" : ["Lviv","Kiev","Kharkiv","Odessa"],
  "Poland":["Krakow","Warsaw"]
}

function changeCountry(){
  document.getElementById("city-list").options.length = 0;

  var cityId = document.getElementById("country-list").value;
  var options='<option value="none" disabled selected>Choose your option</option>';
  if(cityId!="none"){
  		countryObject[cityId].forEach(x=>{
      	options+='<option value="'+cityId+'">'+x+'</option>'
      })
  }
  else{
  	
  }
   document.getElementById("city-list").innerHTML=options;



}

select {
  display:block !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="input-field col s12">
          <select id="country-list" onchange="changeCountry(this)">
            <option value="none" disabled selected>Choose your option</option>
            <option value="Ukraine">Ukraine </option>
            <option value="Poland">Poland</option>
          </select>

    </div>

  <div class="input-field col s12">
              <select id="city-list">
                <option value="none" disabled selected>Choose your option</option>
                <option value="1">Lviv</option>
                <option value="1">Kiev</option>
                <option value="1">Kharkiv</option>
                <option value="1">Odessa</option>
                <option value="2">Krakow</option>
                <option value="2">Warsaw</option>
              </select>
            </div>