使用按钮更新选择值（html）

Question

I've got this Select in my code which select the number of a chapter that i want to display ( image here ) :

<select name="select" onchange="javascript:sliders[0].goTo(value);">
  <?php for($i=1; $i<$row['nbChapitre']+1; $i++){ ?>
    <option value="<?php echo $i; ?>">Chapitre <?php echo $i ;?></option> 
  <?php } ?>
</select>

When i update it, it works perfectly (the slider move to the asked chapter). But, when i use the buttons (next and previous) which have this code :

<a href="javascript:sliders[0].goToPrev()"> < </a>
<a href="javascript:sliders[0].goToNext()"> > </a>

the slider behind works, but the Select doesn't update, and I don't know how to do that...

Thanks for your help.

EDIT : Hum, i think i have to show you my slider's function :

var Slider = function() { this.initialize.apply(this, arguments) }
    Slider.prototype = {
      initialize: function(slider) {
        this.ul = slider.children[0]
        this.li = this.ul.children
        this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px'
        this.currentIndex = 0
      },
      goTo: function(index) {
        if (index < 0 || index > this.li.length - 1)
        return
        this.ul.style.left = '-' + (100 * index) + '%'
        this.currentIndex = index
      },
      goToPrev: function() {this.goTo(this.currentIndex - 1)},
      goToNext: function() {this.goTo(this.currentIndex + 1)}};

I try to edit them as you said, but nothing change...

Answer 1

If I understand your question correctly - your functions change the value of the slider, but not change its displayed option. Assuming you are using jQuery and also that you are changing the selected index of the select menu on your prev and next functions, you need to add a change function to the gotonext() and gotoprev() functions - in order to change the displayed value that you have changed.

$("[name=select]").change();

This will allow your select menu to update. If you are not changing the selected index - you will need to do that. and the select menu will change when you do.

Answer 2

What you need to do is update the selected option. Update your functions like below:

sliders[0].goToPrev = function () {
    $('select[name="select"] option:selected').prev().attr('selected', 'selected');
}

sliders[0].goToNext = function () {
    $('select[name="select"] option:selected').next().attr('selected', 'selected');
}