title: Javascript next prev button
body: <p>I have a simple page here (bottom), that has 2 dependent select boxes.  When the category is selected in the first, then the second fills with sites.
  I can select sites from the second select box and that updates the iframe src.</p>
  
  <p>My question, how do I get the prev / next buttons to trigger an ONCHANGE or ONCLICK?</p>
  
  <p>As in:</p>
  
  <pre><code>ONCHANGE="document.getElementById('youriframe').src = this.options[this.selectedIndex].value"
  </code></pre>
  
  <p>Something like the snippet below would do I guess, but I cant get it to work.</p>
  
  <pre><code> $(document).ready(function(){
      $("#next").click(function() {
          var isLastElementSelected = $('#selectwebsites &gt; option:selected').index() == $('#selectwebsites &gt; option').length -1;
  
      if (!isLastElementSelected) {
          $('#selectwebsites &gt; option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
      } else {
             $('#selectwebsites &gt; option:selected').removeAttr('selected');
             $('#selectwebsites &gt; option').first().attr('selected', 'selected');
       } });
  });
   $(document).ready(function(){    
      $("#prev").click(function() {
          var isFirstElementSelected = $('#selectwebsites &gt; option:selected').index() == 0;
  
      if (!isFirstElementSelected) {
         $('#selectwebsites &gt; option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
      } else {
           $('#selectwebsites &gt; option:selected').removeAttr('selected');
           $('#selectwebsites &gt; option').last().attr('selected', 'selected');
      }    
  });
  });
  
  AND IN THE BODY:
  
  &lt;button type="button" id="prev"&gt;Previous&lt;/button&gt;
  &lt;button type="button" id="next"&gt;Next&lt;/button&gt;
  </code></pre>
  
  <p>Page without prev / next buttons:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;script type="text/javascript" src="/static/js/jquery-latest.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/static/js/script.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(document).ready(function(){
                   $('select#selectsubcategories').change(function () {
                       var optionSelected = $(this).find("option:selected");
                       var valueSelected  = optionSelected.val();
                       var subcategory_name   = optionSelected.text();
  
                       data = {'cnt' : subcategory_name };
                       ajax('/getdetails',data,function(result){
  
                              console.log(result);
                              $("#selectwebsites option").remove();
                              for (var i = result.length - 1; i &gt;= 0; i--) {
                                  $("#selectwebsites").append('&lt;option&gt;'+ result[i].name +'&lt;/option&gt;');
                              };   
                           });
                   });
              });
  
  
          &lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;select name="selectsubcategories" id="selectsubcategories"&gt;
      &lt;option value="" selected="selected"&gt;Select Category&lt;/option&gt;
      {% for category in categories %}
              &lt;optgroup label="{{ category.name }}"&gt;
          {% for item in category.subcategory_set.all %}
              &lt;option val="{{ item.name }}"&gt; {{ item.name }} &lt;/option&gt;    
          {% endfor %}
              &lt;/optgroup&gt;
      {% endfor %}
          &lt;/select&gt;  
  
          &lt;select name ="selectwebsites" id="selectwebsites" ONCHANGE="document.getElementById('youriframe').src = this.options[this.selectedIndex].value"&gt;
         &lt;/select&gt;
  
  
  &lt;iframe name="iframe" id="youriframe" src="http://mywebsite.com" style="border: 0; width: 100%; height: 100%"&gt;Your browser doesn't support iFrames.&gt;&lt;/iframe&gt;
  &lt;/br&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>UPDATE:::::
  moved the call for changing the iframe src and have this called by the select box and both prev-next buttons.</p>
  
  <p>this seems to work</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;script type="text/javascript" src="/static/js/jquery-latest.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/static/js/script.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(document).ready(function(){
                   $('select#selectsubcategories').change(function () {
                       var optionSelected = $(this).find("option:selected");
                       var valueSelected  = optionSelected.val();
                       var subcategory_name   = optionSelected.text();
  
  
                       data = {'cnt' : subcategory_name };
                       ajax('/getdetails',data,function(result){
  
                              console.log(result);
                              $("#selecthiddenwebsites option").remove();
                              for (var i = result.length - 1; i &gt;= 0; i--) {
                                  $("#selecthiddenwebsites").append('&lt;option&gt;'+ result[i].name +'&lt;/option&gt;');
                              };
  
  
                           });
                   });
              });
  
  
          &lt;/script&gt;
          &lt;script&gt;
              $(document).ready(function(){
  $("#next").click(function() {
      var isLastElementSelected = $('#selecthiddenwebsites &gt; option:selected').index() == $('#selecthiddenwebsites &gt; option').length -1;
  
      if (!isLastElementSelected) {     
          $('#selecthiddenwebsites &gt; option:selected').removeAttr('selected').next('option').attr('selected', 'selected'); 
      } else {
             $('#selecthiddenwebsites &gt; option:selected').removeAttr('selected');
             $('#selecthiddenwebsites &gt; option').first().attr('selected', 'selected'); 
       }   
  });
  $("#prev").click(function() {
      var isFirstElementSelected = $('#selecthiddenwebsites &gt; option:selected').index() == 0;
  
      if (!isFirstElementSelected) {
         $('#selecthiddenwebsites &gt; option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
      } else {
           $('#selecthiddenwebsites &gt; option:selected').removeAttr('selected');
           $('#selecthiddenwebsites &gt; option').last().attr('selected', 'selected'); 
      }
  
  });
  });
          &lt;/script&gt;
  &lt;script&gt;
  function newSrc() {
    var e = document.getElementById("selecthiddenwebsites");
    var newSrc = e.options[e.selectedIndex].value;
    document.getElementById("frame").src=newSrc;
  }
          &lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;select name="selectsubcategories" id="selectsubcategories"&gt;
      &lt;option value="" selected="selected"&gt;Select Category&lt;/option&gt;
      {% for category in categories %}
              &lt;optgroup label="{{ category.name }}"&gt;
          {% for item in category.subcategory_set.all %}
              &lt;option val="{{ item.name }}"&gt; {{ item.name }} &lt;/option&gt;    
          {% endfor %}
              &lt;/optgroup&gt;
      {% endfor %}
          &lt;/select&gt;  
  &lt;button type="button" id="prev" ONCLICK="newSrc();"&gt;Previous&lt;/button&gt;
          &lt;select name ="selecthiddenwebsites" id="selecthiddenwebsites" ONCHANGE="newSrc();"&gt;
         &lt;/select&gt;
  &lt;button type="button" id="next" ONCLICK="newSrc();"&gt;Next&lt;/button&gt;
      &lt;br /&gt;
  &lt;iframe name="iframe" id="frame" src="/browserpage/" style="border: 0; width: 100%; height: 100%"&gt;Your browser doesn't support iFrames.&gt;&lt;/iframe&gt;
  &lt;/br&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>