HTML
<script src="js/DatalistSelectEx.js"></script>
～略～
<form action="#">
<div class="col-6">
<div class="input-group">
<input type="text" id="animal_id" name="animal_id" value="99"/>
<input list="animal_dlist" id="animal_name" name="animal_name" value="" class="form-control">
<div class="input-group-append">
<button id="animal_id_clear" class="btn btn-outline-secondary" type="button">×</button>
</div>
<span id="animal_id_err" class="text-danger"></span>
<datalist id="animal_dlist" ></datalist>
</div>
</div>
<button id="submit_btn" class="btn btn-warning btn-lg" onclick="return onSubmit1()">Submit</button>
<div class="text-danger" id="valid_err_msg"></div>
</form>
JavaScript
let datalistSelectEx1;
$(()=>{
let testList = _getTestList();
datalistSelectEx1 = new DatalistSelectEx(testList, {
'inp_id_xid':'animal_id',
'inp_name_xid':'animal_name',
'clear_xid':'animal_id_clear',
'err_xid':'animal_id_err',
'datalist_xid':'animal_dlist',
});
});
// Submitボタン押下アクション
function onSubmit1(){
$('#valid_err_msg').html('');
let err_msg = datalistSelectEx1.checkError();
if(err_msg){
$('#valid_err_msg').html(err_msg);
return false;
}
return true;
}
function _getTestList(){
let testList = {
1:'アベサンショウウオ',
2:'アカイシサンショウウオ',
1000:'赤猫',
1001:'赤猫',
1002:'赤猫',
3:'ハクバサンショウウオ',
4:'ホクリクサンショウウオ',
5:'オオイタサンショウウオ',
602:'ニライカナイボウズハゼ',
603:'トラフボウズハゼ',
604:'タイワンキンギョ',
};
return testList;
}
HTML
～略～
<script src="js/jquery3.js"></script> <!-- jquery-3.3.1.min.js -->
<script src="js/CSelectLinkage.js"></script>
<script src="js/script.js"></script>
～略～
<form action="#" method="post">
<select id="animal_id" name="animal_id" data-value="<?php echo $_POST['animal_id'] ?? 0 ?>"></select>
<select id="category_id" name="category_id">
<option value="">-- すべて --</option>
<option value="1">哺乳類</option>
<option value="2">爬虫類</option>
<option value="3">両生類</option>
<option value="4">魚類</option>
<option value="5">鳥類</option>
</select>
<button class="btn btn-success">Submit</button>
</form>
JavaScript script.js
$(()=>{
var data = [
{'animal_id':1,'category_a':2,'animal_name':'トカゲ'},
{'animal_id':2,'category_a':1,'animal_name':'ネコ'},
{'animal_id':3,'category_a':1,'animal_name':'ウシ'},
{'animal_id':4,'category_a':2,'animal_name':'ヘビ'},
{'animal_id':5,'category_a':2,'animal_name':'カナヘビ'},
{'animal_id':6,'category_a':4,'animal_name':'タナゴ'},
];
var cSelectLinkage = new CSelectLinkage({
'main_select_slt':'#animal_id', // 主SELECTのセレクタ | リストはカテゴリSELECTの値に連動して変化します。
'category_select_slt':'#category_id', // カテゴリSELECTのセレクタ
'main_field':'animal_id',
'category_field':'category_a',
'display_name_field':'animal_name',
'data':data, // 主SELECTのリストで使われるデータです。 main_field, category_field, display_name_fieldで指定されたプロパティで構成されるエンティティの配列です。
'empty':' --- ', // 主SELECTの未選択時の表記名 nullをセットすると未選択項目は表示されません。
'all_category_flg':true, // 全カテゴリフラグ trueにすると、カテゴリSELECTで空を選択した際、主SELECTを全カテゴリの選択肢を表示します。
});
});