Aplikasi menggunakan ColdFusion untuk membaca file CSV dan menampilkan header kolom untuk pemetaan ke header kolom yang akan diterima aplikasi kita. Jumlah header kolom yang diupload akan bervariasi dan jumlah total tidak diketahui. Nilai yang dapat diterima aplikasi ditampilkan dalam daftar. Setelah nilai dipilih dari daftar, itu tidak dapat digunakan dalam daftar pilihan lainnya. Saya memiliki pemisah dengan nilai "" dan opsi "Pilih Satu" yang khas dengan nilai nol. Ketika opsi dalam daftar dipilih, itu menghapus opsi itu dari semua daftar lain di halaman tetapi juga menghapus opsi "" dari daftar pilih aktif yang tidak diinginkan karena jika pengguna membuat kesalahan dan ingin mengatur ulang mereka seleksi ke "", mereka tidak bisa. Tolong bantu saya memahami cara menjaga JS berfungsi apa adanya, tetapi hanya jika item daftar yang dipilih bukan nilai "".

// when an option is selected, remove that option from all other select lists

// problem discovered: removes all NULL items (select one and section breaks) from the list too.  need to retain null items 
function checkTheDropdowns() {
  var arr = $('select').find(':selected');

  $('select').find('option').show();

  $.each($('select'), function() {
    var self = this;
    var selectVal = $(this).val();

    console.log("selectVal: " + selectVal);
    console.log("this: " + this);

    //if the selected value is "", do not remove it from the list
    //if (selectVal){

    $.each(arr, function() {
      if (selectVal !== $(this).val()) {
        $(self).find('option[value="' + $(this).val() + '"]').hide()

      } else {
        $(self).find('option[value="' + $(this).val() + '"]').show()
      }
    });

    //}
  })
};
1
sherriec 15 Mei 2020, 15:50

1 menjawab

Jawaban Terbaik

Saat memutuskan apakah suatu opsi harus disembunyikan, saya akan menggunakan tanda centang apakah nilainya memiliki panjang sebelum memutuskan untuk menyembunyikannya.

Karena angka 0 dianggap salah dalam Javascript, Anda bisa menambahkan cek if( $(this).val().length ) sederhana.

Saya menambahkan html saya sendiri untuk menguji ini dan saya harap ini agak mirip dengan aplikasi Anda yang sebenarnya.

Ini akan menghapus opsi dari semua <select> lainnya kecuali opsi dengan nilai "".

function checkTheDropdowns() {
	var arr = $('select').find(':selected');
	$('select').find('option').show();
	$.each($('select'), function() {
		var self = this;
		var selectVal = $(this).val();
    $.each(arr, function() {
      if (selectVal === $(this).val()) {
        $(self).find('option[value="' + $(this).val() + '"]').show();
      } else if($(this).val().length) { //<---- This is the actual solution
        $(self).find('option[value="' + $(this).val() + '"]').hide();
      }
    });
	});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-one" onchange="checkTheDropdowns()">
	<option selected disabled>Select one</option>
	<option value=""></option>
	<option value="a">a</option>
	<option value="b">b</option>
	<option value="c">c</option>
	<option value="d">d</option>
	<option value="e">e</option>
	<option value="f">f</option>
</select>

<select id="select-two" onchange="checkTheDropdowns()">
	<option selected disabled>Select one</option>
	<option value=""></option>
	<option value="a">a</option>
	<option value="b">b</option>
	<option value="c">c</option>
	<option value="d">d</option>
	<option value="e">e</option>
	<option value="f">f</option>
</select>

<select id="select-three" onchange="checkTheDropdowns()">
	<option selected disabled>Select one</option>
	<option value=""></option>
	<option value="a">a</option>
	<option value="b">b</option>
	<option value="c">c</option>
	<option value="d">d</option>
	<option value="e">e</option>
	<option value="f">f</option>
</select>
2
Magnus Svensson 15 Mei 2020, 13:49