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

【问题标题】：Change select options when I click on a anchor tag单击锚标记时更改选择选项
【发布时间】：2012-10-10 15:14:45
【问题描述】：

当我点击锚标记时，我想要做的是替换/更改 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>

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

这是我的jsFiddle。

【问题讨论】：

您的 ids ("slideOne") 和您的值 ("blue") 之间没有关系。

标签： jquery html css select options

【解决方案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'))
});

【讨论】：

如果select option 的值与类不同怎么办？ @diodeus 前。 - jsfiddle.net/RLrbk/2
有很多方法可以解决这个问题，包括使用“data-”元素，也可以通过 jQuery 轻松访问。
会不会兼容ie7？因为它是一个 html5 属性？
jQuery 在 ie 7 上处理它。没有问题。

【解决方案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

【讨论】：

你可以使用split('#')[1]，而不是slice(1)。
是的..我想知道为什么 slice() 以前不起作用.. 现在发现了大声笑jsfiddle.net/wirey00/DaVFw/1
哦，是的...href可能不是那么容易使用...使用$(this).attr('href')。
如果select option 与id 不同怎么办？

【解决方案3】：

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

尝试改用 href 属性...

【讨论】：

【解决方案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 属性

【讨论】：