title: Clearing select options with javascript on change
body: <p>Before you -1 this for being such a simple question read further, because ive spent a while searching and cant figure it out. What i have is 5 select boxes. Each ones results depend on what is selected before it. There is no submit button. I just need the  to change based on whats selected in the previous box and so far i have that. Oh and the results are being pulled from a database. The problem is when you select an option in lets say box 1, box 2 options appear, but when you go and select an option in box 1 again, they options are just stacked on the others. I need them to clear when its changed again. I'll post the js i have and if you need anything else just ask. </p>
  
  <p>p.s. im getting the options using php-mysql. 
  p.s.s this site has to be finished by tomorrow so im kinda in a rush. Please dont waste time telling me this is a stupid question or what not. </p>
  
  <p>Thanks in advance for the help.</p>
  
  <pre><code>$(function () { //When the page is finished loading run this code
      $('#country').change(function () {
          $.ajax({
              url: "&lt;!--Base url taken out--&gt;/discovery/aLoad",
              success: function (data) {
                  eval(data);
              },
              error: function () {
                  alert('failed');
              },
              data: {
                  country: getSelectValues('#country')
              },
              type: 'POST'
          });
      });
   });
  
       function changeSearchBar (newBar) {
      //remove the crap
      function ClearOptions(country)
      {
      document.getElementById('country').options.length = 0;
      }
  
      for (var i = 0; i &lt;= newBar.length; i++) {
          newBar[i].id = newBar[i][0];
          newBar[i].name = newBar[i][1];
          $('#group').append(
              $('&lt;option&gt;&lt;/option&gt;').attr('value', newBar[i].id).text(newBar[i].name)
          );
      }
       }
  
       function getSelectValues (sId) {
      var str = "";
  
      $(sId +" option:selected").each(function () {
          str += $(this).val() + ",";
      });
  
      return str.replace(/.$/g, '');
  }
  </code></pre>