セレクトボックス選択後、セレクトボックス作成し連動も
サンプル
←カテゴリを選ぶと↓のメニューが出来上がる←どちらかを選択すると両方とも同じvalueの値の連動
ソース
JS
jQuery(function ($) {
var optiontest = {
test: {
'': "",
'あ': "あいうえおかきくけこ",
'か': "かきくけこさしすせそ"
},
test2: {
'': "",
'さ': "さしすせそたちつてと",
'た': "たちつてとなにぬねの"
}
}
var optiontest2 = {
test: {
'': "",
'あ': "あいうえ",
'か': "かきくけ"
},
test2: {
'': "",
'さ': "さしすせそ",
'た': "たちつてと"
}
}
let selectList = "#parent";
let child = "#child";
let child2 = "#child2";
$(selectList).on('change', function () {
//セレクト内を初期化
$(child).children().remove();
$(child2).children().remove();
var cat = $(this).val();
if (cat) {
//アイテム１の配列
var items = optiontest[cat];
//アイテム２の配列
var it2 = optiontest2[cat];
//１、２のキーを取得
var item = Object.keys(items);
//キーでループ
item.forEach(function (value, index, array) {
option = '';
$(child).append(option);
option2 = '';
$(child2).append(option2);
});
} else {
$(child).val('');
$(child2).val('');
}
});
//選択連動
$(child).on('change', function () {
$(child2).val($(this).val());
});
//選択連動
$(child2).on('change', function () {
$(child).val($(this).val());
});
});
HTML