要件:
<select1>
いくつかのオプションが含まれています (プレースホルダー テキスト = "新車または中古車の選択")
<select2>
オプションなしで無効化されている (プレースホルダー テキスト = "メーカーの選択")
<select1>
<select2>
ユーザーは、1 からの結果が取り込まれたオプションを選択します
Jquery Select2 プラグインを利用する
select2プラグインも使用して、select2を正しく入力し、連鎖選択を機能させました
問題: 結果が得られたときにプレースホルダー テキストに「5 件の結果が見つかりました」と表示させたい 結果が得られなかった場合にプレースホルダー テキストに「0 件の結果が見つかりました」と表示して無効に戻したい 現在、プレースホルダー テキストはオンに変更されています最初に選択し、再選択するとselect2プレースホルダーが台無しになります
HTML:
//<select1>
<select name='category_id' id='category_id'>
<option value='1'>New</option>
<option value='2'>Used</option>
</select>
//<select2>
<select name='make_id' id='make_id'><option value=''></option></select>
//javascript
<script type='text/javascript'>
$(document).ready(function() {
$('#category_id').select2({
placeholder: 'Select new or used Vehicles',
allowClear: true
});
$('#make_id').select2({
placeholder: 'Select Manufacturer',
allowClear: true
});
$('#category_id').change(function() {
var selectedCategory = $('#category_id option:selected').val();
$.ajax({
type: 'POST',
url: 'ajax.php',
dataType: 'html',
data: {
a: 'dropDownsHome',
c: selectedCategory
},
success: function(txt){
//no action on success, its done in the next part
}
}).done(function(data){
//get JSON
data = $.parseJSON(data);
//generate <options from JSON
var list_html = '';
$.each(data, function(i, item) {
list_html += '<option value='+data[i].id+'>'+data[i].make+'</option>';
});
//replace <select2 with new options
$('#make_id').html(list_html);
//set to enabled|disabled
if (data.length > 1) {
$('#make_id').select2('enable', true); //enable form
}else{
$('#make_id').select2('enable', false); //disable form
}
//change placeholder text
$('#make_id').select2({placeholder: data.length +' results'});
})
});
});
</script>
//ajax.php からの JSON 結果 (結果がない場合は false が返されます) [{"id":"1","make":"Foton"},{"id":"4","make":"ヒュンダイ"},{"id":"5","make":"起亜"},{"id":"2","make":"プロトン"},{"id":"2"," make":"Proton"},{"id":"3","make":"Tata"},{"id":"3","make":"Tata"},{"id":" 6","make":"トヨタ"}]