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

Answer 2

您正在获取与您的选项不匹配的锚点的ID。

你可以这样做

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

FIDDLE

如@destroy建议您也可以使用.slice（1）

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

Slice Fiddle

或.replace（）

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

Replace Fiddle

Answer 3

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

尝试使用 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属性

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

4 个答案: