Lista

Prethodna Sledeća

by Godfather

HTML

<select id="lista" class="dropdown">
<option value="">Izaberi opciju...</option>
<option value="1">Opcija 1</option>
<option value="2">Opcija 2</option>
<option value="3">Opcija 3</option>
<option value="4">Opcija 4</option>
<option value="5">Opcija 5</option>
<option value="6">Opcija 6</option>
<option value="7">Opcija 7</option>
<option value="8">Opcija 8</option>          
       </select>
<hr>
<button id="prev" class="prevbutton">Prethodna</button>
<button id="next" class="nextbutton">Sledeća</button>

JavaScript

$(document).ready(function() {
    $(".nextbutton").button({ disabled: true });
    
    $('.dropdown').change(function() {
        console.log($('.dropdown').val());
        if ($('.dropdown').val() == 0) {
          $(".prevbutton").button({ disabled: true });
        } else if ($('.dropdown').val() == 1) {
          $(".prevbutton").button({ disabled: true });
          $(".nextbutton").button({ disabled: false });            
        } else if ($('.dropdown').val() == 8) {
          $(".nextbutton").button({ disabled: true }); 
        } else {
          $(".nextbutton").button({ disabled: false });
          $(".prevbutton").button({ disabled: false });
        }
    });
$(".prevbutton").button({ disabled: true });
    
});
$("#next").click(function() {
  var nextElement = $('#lista > option:selected').next('option');
  if (nextElement.length > 0) {
    $('#lista > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
  $('.dropdown').trigger('change');      
  }
});

$("#prev").click(function() {
  var nextElement = $('#lista > option:selected').prev('option');
  if (nextElement.length > 0) {
    $('#lista > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
  $('.dropdown').trigger('change');        
  }  
});