Question

我有onchange个事件的下拉列表。当用户更改下拉框时，会调用ajax并显示结果。这一切都很好。

我在模板中有以下列表。

Apple
Pineapple

当用户更改下拉值时。然后结果合并

Orange
Graps

Apple
Pineapple

但输出应该是这样的。

Orange
Graps

我不知道该怎么做。请帮我。这是我的base。这是我的movie_list模板。这是我的movie_sort模板。这是我的view。谢谢： - ）

更新：这是ajax代码。

   function sortMovie(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

    }
  }
xmlhttp.open("GET","/moviesort/?q="+str,true);
xmlhttp.send();

}

DROP DOWN

           <select name="category" onchange="sortMovie(this.value)">
                <option value="">Choose</option>
                {% for category in categories %}
                <option value="{{ category.id}}">{{category.name}}</option>
                {% endfor %}                    
                </select>

Answer 1

如果您使用jQuery调用ajax，我建议您在.change（）函数后直接使用.empty（）。

我不知道你的样子，虽然它应该是这样的。

$('#id_category').change(function() {
    /* Set your string to nothing */
    var str = "";
    /* once your dropdown is changed, it performs a look and gets the new data */
    $("#id_category option:selected").each(function () {
        /* Before inserting the new data, empty out all the old items */
        $('#id_sub_category').empty();
        str += $(this).val();
        $.get('{% url gear_category %}', { category: str }, function(data){
            $(data).appendTo("#id_sub_category");
        });
    });
});

希望这有帮助。

Answer 2

我同意ApPel的意见。

但是，因为你没有使用jQuery ......

你要么必须循环遍历select和remove中的每个选项，或者我想如果纯javascript支持你可能能够模仿jQuery代码，但是使用javascript语法。

无论哪种方式，您都必须在追加新值之前删除旧值。这就是问题所在。

下载onchange事件

2 个答案: