Saya menggunakan materialize, dan masalahnya adalah: Saya memiliki 2 pilih-div dengan opsi, dan ketika saya memilih Ukranine di pilih pertama? Pilihan kedua hanya akan menunjukkan kepada saya Lviv, Odessa, Kiev, kharkiv. Jika saya memilih Polandia pada pilihan pertama, pilihan kedua hanya akan menunjukkan kepada saya Warsawa dan Krakow. Saya sudah mengajukan pertanyaan yang sama, dan menerima beberapa jawaban yang berguna, tetapi ketika saya menautkan materialize css, kode tidak berfungsi.

<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>

Dan di sini 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]);
    }
}
-1
Rostek 17 April 2020, 17:21

2 jawaban

Jawaban Terbaik

Tidak perlu terus menerus menemukan elemen pada halaman. Temukan mereka sekali, dan gunakan elemen yang dihasilkan nanti saat dibutuhkan.

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>
0
dillon 17 April 2020, 14:59

Saya mengubah nilai pilih negara Anda dengan nama negara dan mengedit fungsi Anda

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>
0
Çağrı 17 April 2020, 14:46