jquery - 单击锚标记时更改选择选项

Question

我要做的是在单击锚标记时替换/更改标记内的文本。select如您所见，它只更改一次。我究竟做错了什么？

HTML

<div id="navigation">
    <ul>
        <li><a id="slideOne" href="#blue">Blue Product</a></li>
        <li><a id="slideTwo" href="#red">Red Product</a></li>
    </ul>
</div>

<select>
    <option disabled="disabled" selected="selected">Select Color</option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
</select>​

JS

$('#navigation a').click(function() {
    $('select').val(this.id).change();
});​

这是我的jsFiddle。

Answer 1

使用类名来存储您的颜色属性，然后在您的事件中使用它们。

<div id="navigation">
    <ul>
        <li><a id="slideOne" class="blue" href="#blue">Blue Product</a></li>
        <li><a id="slideTwo" class="red" href="#red">Red Product</a></li>
    </ul>
</div>

JS：

$('#navigation a').click(function() {
    $('select').val($(this).attr('class'))
});

​</p>

Answer 2

您将获得与您的选项完全不匹配的锚的 ID。

你可以这样做

$('#navigation a').click(function() {
    $('select').val(this.href.split('#')[1]).change();
});​

小提琴

正如@destroy 建议的那样，您也可以使用 .slice(1)

$('#navigation a').click(function() {
    $('select').val($(this).attr('href').slice(1)).change();
});​

切片小提琴

或 .replace()

$('#navigation a').click(function() {
    $('select').val($(this).attr('href').replace('#','')).change();
});​

更换小提琴

Answer 3

锚的 id 值没有与 select 中的值映射 .. 所以它们之间没有关系..

尝试改用href属性...

Answer 4

您的 js 应如下所示：

$('#navigation a').click(function() {
    var lookup={
        'slideOne' : 'blue',
        'slideTwo' : 'red'
    }
    var target = lookup[this.id];
    $("select option[val=" + target +"]").attr("selected","selected") ;
});​

更好的选择是使用可以消除对查找对象的依赖的 href 属性