Question

我使用jquery附加选项选项它工作但我想添加

<option value="0">choose category</option>

任何选中之后当我在html中添加它时，它隐藏在选择选项apeend

之后

<script type="text/javascript">
$(document).ready(function() {
    $('select[name="cat"]').on('change', function() {
        $('select[name="subcat"]').removeClass('hidden');
        $('select[name="subcat2"]').addClass('hidden');
        //$('select[name="subcat2"]').find('option').remove().end(); 
        var stateID = $(this).val();
        if(stateID) {
            $.ajax({
                url: '{{ url('getCat') }}/'+stateID,
                type: "GET",
                dataType: "json",
                success:function(data) {
                    $('select[name="subcat"]').empty();
                    $.each(data, function(key, value) {
                        $('select[name="subcat"]').append('<option value="'+ key +'">'+ value +'</option>');
                    });
                }
            });
        }else{
            $('select[name="subcat"]').empty();

        }
    });
});

Answer 1

我模拟了你的问题，看看你想要的是什么？

Link jsfiddle

HTML

$(document).ready(function() {
    $('select[name="cat"]').on('change', function() {
        //$('select[name="subcat"]').removeClass('hidden');
        //$('select[name="subcat2"]').addClass('hidden');
        //$('select[name="subcat2"]').find('option').remove().end(); 
        var stateID = $(this).val();
        if(stateID) {
            $.ajax({
                        data: {
                    json: JSON.stringify({
                        object: {
                            1: 'Sub cat 1',
                            2: 'Sub cat 2',
                            3: 'Sub cat 3',
                        }
                    }),
                    delay: 1
                },
                url: '/echo/json/',
                type: "POST",
                dataType: "json",
                success:function(data) {
                    $('select[name="subcat"]').empty();
                    $('select[name="subcat"]').append('<option value="0">choose category</option>');
                    $.each(data.object, function(key, value) {
                        $('select[name="subcat"]').append('<option value="'+ key +'">'+ value +'</option>');
                    });
                    $('select[name=subcat]').show();
                }
            });
        }else{
            $('select[name="subcat"]').empty();

        }
    });
});

JS

Love

Answer 2

那是因为你在追加之前调用了空函数。因此，如果您有硬编码选项success:function(data) { $('select[name="subcat"]').empty(); $('select[name="subcat"]').append('<option value="0">choose category</option>'); $.each(data, function(key, value) { $('select[name="subcat"]').append('<option value="'+ key +'">'+ value +'</option>'); }); }，则会在添加新选项之前将其删除。

save

jquery在选项后附加选择选项

2 个答案: