Question

我在我的代码中选择了这个选择我想要显示的章节的编号（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>

当我更新它时，它完美地工作（滑块移动到询问的章节）。但是，当我使用具有以下代码的按钮（下一个和上一个）时：

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

后面的滑块有效，但Select不会更新，我不知道该怎么做......

感谢您的帮助。

编辑：嗯，我想我必须告诉你滑块的功能：

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)}};

我试着像你说的那样编辑它们，但没有任何改变......

Answer 1

如果我正确理解您的问题 - 您的功能会更改滑块的值，但不会更改其显示的选项。假设您正在使用jQuery，并且您正在更改prev和next函数的select菜单的选定索引，则需要向gotonext（）和gotoprev（）函数添加更改函数 - 以便更改显示的值你改变了。

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

这将允许您的选择菜单更新。如果您没有更改所选索引 - 您需要这样做。当你这样做时，选择菜单会改变。

Answer 2

您需要做的是更新所选选项。更新您的功能如下：

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');
}

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

2 个答案: