title: drop down with onchange events
body: <p>I have a dropdown with <code>onchange</code> events. When ever user change the drop down box then ajax called and result displayed. All this working fine.</p>
  
  <p>I have following list in template.  </p>
  
  <pre><code>Apple
  Pineapple
  </code></pre>
  
  <p>When ever user changed the drop down value. Then result merged</p>
  
  <pre><code>Orange
  Graps
  
  Apple
  Pineapple
  </code></pre>
  
  <p>But output should be like this.</p>
  
  <pre><code>Orange
  Graps
  </code></pre>
  
  <p>I have no idea what to do. Please help me. Here is my <a href="http://dpaste.org/gobq7/" rel="nofollow">base</a>. Here is my <a href="http://dpaste.org/bk5pi/" rel="nofollow">movie_list</a> template. Here is my <a href="http://dpaste.org/JuR8Z/" rel="nofollow">movie_sort</a> template. And here is my <a href="http://dpaste.org/PSXik/" rel="nofollow">view</a> . Thanks :-)</p>
  
  <p>UPDATE: Here is ajax code.</p>
  
  <pre><code>   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 &amp;&amp; xmlhttp.status==200)
      {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  
      }
    }
  xmlhttp.open("GET","/moviesort/?q="+str,true);
  xmlhttp.send();
  
  }
  </code></pre>
  
  <p>DROP DOWN </p>
  
  <pre><code>           &lt;select name="category" onchange="sortMovie(this.value)"&gt;
                  &lt;option value=""&gt;Choose&lt;/option&gt;
                  {% for category in categories %}
                  &lt;option value="{{ category.id}}"&gt;{{category.name}}&lt;/option&gt;
                  {% endfor %}                    
                  &lt;/select&gt;
  </code></pre>