初めまして。
Select項目の動作について質問があります。
どなたかお分かりになる方がいらっしゃったら教えてください。
カスタマイズビューでSelect項目が3つあり、1つ目のSelect(得意先コード)で選択したら残りの2つ(部課所コード・店所コード)に値を設定しているのですが、部課所・店所ともに最初の選択で空になっており、再度選択をしたときに値が見える状態です。(2回クリックしないと値が表示しないかんじです)デバッグモードで確認するかぎりでは部課所コード・店所コードのSelectに値は設定されています。
この現象はIEでのみで、ChromeやEdgeでは起こりません。
質問の内容が分かりにくかったらすみません。
色々試してはみたのですが、さっぱりわかりません。IEだと何か別のコーディングもしくはCSSで何か設定しないといけないのでしょうか?すみませんが、どなたか教えてください。よろしくお願い致します。
以下、ソースです。
カスタマイズビュー内(該当項目のみアップしてます)
<span class=“lbl-customer”>得意先コード</span>
<select id=“selCustomer” class=“select-customer”></select>
<span class=“lbl-department”>部課所コード</span>
<select id=“selDepartment” class=“select-department”></select>
<span class=“lbl-shop”>店所コード</span>
<select id=“selShop” class=“select-shop”></select>
JavaScript内(得意先コードを変更した場合)
selRecords=得意先コードから取得したレコードが入っています
$(function() {
$(‘#selCustomer’).change(function() {
var checkCustomer = $(this).val();
var departmentCdVal = [];
var shopCdVal = [];
$(‘#selDepartment option’).remove();
$(‘#selShop option’).remove();
$(‘#selDepartment’).append($(‘<option>’).html(“”).val(“”));
$(‘#selShop’).append($(‘<option>’).html(“”).val(“”));
for (var i = 0; i < selRecords.length; i++) {
//該当する部課所コードを取得
if (checkCustomer === selRecords[i][INVOICE_CD].value) {
//部課所コードを設定
if (selRecords[i][DEPARTMENT_CD_NAME].value.trim() !== “”) {
//値の格納変数に同じ値がないかチェック(同じ値はセットしない)
if($.inArray(selRecords[i][DEPARTMENT_CD_NAME].value, departmentCdVal) < 0){
departmentCdVal.push(selRecords[i][DEPARTMENT_CD_NAME].value);
$(‘#selDepartment’).append($(‘<option>’).html(selRecords[i][DEPARTMENT_CD_NAME].value).val(selRecords[i][DEPARTMENT_CD_NAME].value));
}
}
//店所コードを設定
if($.inArray(selRecords[i][SHOP_CD_NAME].value, shopCdVal) < 0){
shopCdVal.push(selRecords[i][SHOP_CD_NAME].value);
$(‘#selShop’).append($(‘<option>’).html(selRecords[i][SHOP_CD_NAME].value).val(selRecords[i][SHOP_CD_NAME].value));
}
}
}
return;
});
});