用ajax替换选择选项？答案

【问题标题】：Replace select options with ajax?用ajax替换选择选项？
【发布时间】：2021-12-25 02:47:13
【问题描述】：

我有三个下拉菜单，1 取决于 2 而 2 取决于 3。这就是它的工作原理。我对第 3 个有问题，当用户在 2 上更改某些内容时，3 将新选项与旧选项一起附加。如何用新的替换旧的？

我的代码：

<script>
    $("#id_name").change(function () {
      var url = $("#create_application_form").attr("data-cities-url"); 
      var nameId = $(this).val();  
      var temp_intakes = null
      $.ajax({                       
        url: url,                    
        data: {
          'name': nameId 
        },
        success: function (data) { 
            temp_intakes = data.data;
            $.each(data.data, function(index, name){
                $('select[id=id_course]').append(
                $('<option></option>').val(name.id).html(name.name)
                );
              });
            }
      });
      $("#id_course").change(function () {
          
          var selected = $(this).val()
          var data = temp_intakes.filter(v => v.id === parseInt(selected ));
          $.each(data, function(index, name){
            $.each(name.intakes, function(index, test){
                $('select[id=id_intakes]').append(
                    $('<option></option>').attr("value",test).text(test) // problem on here
                )
            })
          });
      })
    });
  </script>

我上面的数据看起来像这样

{id: 2, name: 'John', intakes: Array(3)} // the third option using this "intakes" array as options.

请帮忙。

【问题讨论】：

标签： jquery ajax

【解决方案1】：

您可以先删除旧选项，然后添加新选项。最终这将取代选项。

<script>
    $("#id_name").change(function () {
        var url = $("#create_application_form").attr("data-cities-url"); 
        var nameId = $(this).val();  
        var temp_intakes = null
        $.ajax({
            url: url,                    
            data: {
              'name': nameId 
            },
            success: function (data) { 
                temp_intakes = data.data;
                $.each(data.data, function(index, name){
                    $('select[id=id_course]').append(
                        $('<option></option>').val(name.id).html(name.name)
                    );
                });
            }
        });
        $("#id_course").change(function () {
          
          var selected = $(this).val()
          var data = temp_intakes.filter(v => v.id === parseInt(selected ));
          $.each(data, function(index, name){
            $.each(name.intakes, function(index, test){
                $('select[id=id_intakes] option').remove(); // first remove the old options
                $('select[id=id_intakes]').append(
                    $('<option></option>').attr("value",test).text(test)
                )
            })
          });
        })
    });
</script>

【讨论】：