Question

要求： <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”， “使”： “福田”}，{ “ID”： “4”， “使”： “现代”}，{ “ID”： “5”， “使”： “KIA”}，{ “ID”： “2”， “使”： “质子”}，{ “ID”： “2”， “使”： “质子”}，{ “ID”： “3”， “使”： “塔塔”}，{ “ID”： “3”， “使”： “塔塔”}，{ “ID”： “6”， “使”： “丰田”}]

Answer 1

尝试升级插件

我尝试使用3.4.0版本启用和禁用工作正常并添加

list_html += ' <option value=""></option>';

上面跟着代码一起，然后占位符也会显示..我已经编辑了下面编辑过的代码

//generate <options from JSON
            var list_html = '';
            list_html += ' <option value=""></option>';

            $.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
                $('#make_id').select2({placeholder: data.length +' results'});

            }else{

                $('#make_id').select2('enable', false); //disable form
                $('#make_id').select2({placeholder: 0 +' results'});


            }

Jquery select2 ajax链式选择

1 个答案: