假设我有以下链接和下拉菜单：
<a href="#contact">Send a mail to mother!</a>
<a href="#contact">Send a mail to father!</a>
<a href="#contact">Send a mail to sister!</a>
<a href="#contact">Send a mail to brother!</a>
<form id="contact">
<select id="recipient">
<option value="[email protected] /cdn-cgi/l/email-protection">Mother</option>
<option value="[email protected] /cdn-cgi/l/email-protection">Father</option>
<option value="[email protected] /cdn-cgi/l/email-protection">Sister</option>
<option value="[email protected] /cdn-cgi/l/email-protection">Brother</option>
</select>
</form>
基本上我希望每个链接都更改为相应的选择选项。
为了给您提供背景信息，现在我在页面末尾有一个表单，在开头有几个电子邮件链接。当有人单击链接时，它将滚动（锚定）到表单。该表单具有用于选择收件人的下拉列表。我希望它不仅滚动到表单（已经完成），而且还根据单击的链接自动更改选项。
我怎样才能实现这个目标？
Add a data-select这些链接的属性：
<a href="#contact" data-select="[email protected] /cdn-cgi/l/email-protection">Send a mail to mother!</a>
<a href="#contact" data-select="[email protected] /cdn-cgi/l/email-protection">Send a mail to father!</a>
<a href="#contact" data-select="[email protected] /cdn-cgi/l/email-protection">Send a mail to sister!</a>
<a href="#contact" data-select="[email protected] /cdn-cgi/l/email-protection">Send a mail to brother!</a>
然后使用单击的链接的值来设置select元素：
var $select = $('#recipient');
$('a[href="#contact"]').click(function () {
$select.val( $(this).data('select') );
});
这是小提琴：http://jsfiddle.net/Dw6Yv/ http://jsfiddle.net/Dw6Yv/
如果您不想添加这些data-select标记的属性，您可以使用：
var $select = $('#recipient'),
$links = $('a[href="#contact"]');
$links.click(function () {
$select.prop('selectedIndex', $links.index(this) );
});
这是小提琴：http://jsfiddle.net/Bxz24/ http://jsfiddle.net/Bxz24/
请记住，这将要求您的链接的顺序与select选项。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
