jquery在选项后追加选择选项答案

【问题标题】：jquery append select option after optionjquery在选项后追加选择选项
【发布时间】：2018-02-21 07:27:24
【问题描述】：

我使用 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();

        }
    });
});

【问题讨论】：

更清楚...

标签： php jquery append

【解决方案1】：

那是因为你在追加之前调用了空函数。因此，如果您有硬编码选项<option value="0">choose category</option>，它将在添加新选项之前被删除。

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>');
                    });
                }

【讨论】：

【解决方案2】：

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

Link jsfiddle

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="cat">
  <option value="0">choose category</option>
  <option value="1">Cat 1</option>
  <option value="2">Cat 2</option>
</select>
<select name="subcat" style="display:none">
</select>

$(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();

        }
    });
});

【讨论】：