根据班级更改下拉菜单以匹配单击的链接

Posted 2023-05-09

【中文标题】根据班级更改下拉菜单以匹配单击的链接

【英文标题】：Change dropdown to match clicked link depending on class

【发布时间】：2014-04-11 18:47:10

【问题描述】：

当我点击一个链接时，我希望下拉菜单更改为与我点击的链接相匹配。我可以用 hasClass 写一个 if 语句，但我想让它简短一些。链接可以包含多个类 - 我只想匹配 apple-x 类。这就是我所拥有的：

html

<a href="#" class="apple-1 fruit">Apple 1</a>
<a href="#" class="fruit apple-2 tasty">Apple 2</a>
<a href="#" class="apple-3 fruit no-so-tasty">Apple 3</a>
<select id="fruits">
<option value="apple-1 fruit">Apple 1</option>
<option value="apple-2 fruit">Apple 2</option>
<option value="apple-3 fruit">Apple 3</option>
</select>

jQuery

$('a.fruit').click(function () 
  var selected = "what goes here?";
  $('#fruits option[value*="'+selected+'"]').attr('selected','selected');
  return false;
);

【参考方案1】：

试试

$('a.fruit').click(function (e) 
    e.preventDefault();

    var selected = this.className.match(/apple-[^\s$]+/)[0];
    $('#fruits option[value*="' + selected + '"]').prop('selected', true);
);

演示：Fiddle

【讨论】：

完美。谢谢阿伦！

你可以使用 $(this).attr('class').match(/apple-[^\s$]+/);