html - 单击 anchor 标记时更改选择选项

Question

我想做的是在我点击 anchor 标记时替换/更改 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'))
});