Question

我正在研究一组动态选择选项。 ajax调用可与on change函数一起使用，但是由于某些原因，.remove()方法似乎不起作用。当我更改机构时，会添加新的部门，但不会删除现有的部门。

我敢肯定，这里某个地方存在明显的错误，但是我盯着这个眼睛看了这么久，以至于找不到它。在此先感谢您抽出宝贵的时间来吸引您的眼球。

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="/assets/js/main.js"></script>

</head>
<body>

    <form method="POST" action="/ajax">

        <label for="institution">Institution</label>
            <select class ="form-control" id="institution" name="institution">
                <option value="">-- select one --</option>
                <option value="one">one</option>
                <option value="two">two</option>
                <option value="three">three</option>
            </select>            

        <select id="departments">
            <option>-- choose one --</option>
        </select>

        <select name="blocks" id="blocks">
            <option value="">-- choose one --</option>
        </select>

        <input id="submit" type="submit" value="Submit" />
    </form>
    <br /><br /><br />
<a href="#" id="tester">which value?</a>
</body>
</html>

和javascript ...

$(document).ready(function() {
    var $departments = $('select#departments');
    $('select#institution').on('change', function () {
        $('option.department-dynamic-option').remove();
        $.ajax({
            type: 'GET',
            url: '/ajax/institution/' + this.value + '/departments',
            success: function (depts) {
                $.each(depts.result, function (i, dept) {
                $departments.append('<option class="department-dynamic-option" value="' + dept.department_id + '">' + dept.department_name + '</option>')
            });
            }
        });
    });
});

Answer 1

也许您可以使用jquery html函数？

$(document).ready(function() {
var $departments = $('select#departments');
$('select#institution').on('change', function () {
    $departments.html('');//Clean the inner html
    $.ajax({
        type: 'GET',
        url: '/ajax/institution/' + this.value + '/departments',
        success: function (depts) {
            $.each(depts.result, function (i, dept) {
            $departments.append('<option class="department-dynamic-option" value="' + dept.department_id + '">' + dept.department_name + '</option>')
        });
        }
    });
});

}）;

Answer 2

解决了这个问题。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>

    <form method="POST" action="/ajax">

        <label for="institution">Institution</label>
        <select class ="form-control" id="institution" name="institution">
            <option value="">-- select one --</option>
            <option value="one">one</option>
            <option value="two">two</option>
            <option value="three">three</option>
        </select>   

        <select id="departments">
            <option>-- choose one --</option>
        </select>

        <select name="blocks" id="blocks">
            <option value="">-- choose one --</option>
        </select>

        <input id="submit" type="submit" value="Submit" />
    </form>


<script>

$( '#institution' )
  .change(function () {
    var $departments = $('select#departments');
    $('.dynamicdepts').remove()
    $.ajax({
        type: 'GET',
        url: '/ajax/institution/' + this.value + '/departments',
        success: function (depts) {
            $.each(depts.result, function (i, dept) {
                $departments.append('<option class="dynamicdepts" value="' + dept.department_id + '">' + dept.department_name + '</option>')
            });
        }
    });

  });
$( 'select#departments')
    .change(function () {
        var $blocks = $('select#blocks');
        $('.dynamicblocks').remove()
        $.ajax({
        type: 'GET',
        url: '/ajax/department/' + this.value + '/blocks',
        success: function(blocks){
            $.each(blocks.result, function(i, block){
                $blocks.append('<option class="dynamicblocks" value="' + block.block_id + '">' + block.block_name + '  --  (' + block.block_start + ' to ' + block.block_end + ')</option>')
            });
        }
    });
    })
</script>
</body>
</html>

jQuery .remove（）无法正常工作？

2 个答案: