使用 jQuery 在选择菜单中移动选定的属性答案

【问题标题】：Move the selected attribute in a select menu using jQuery使用 jQuery 在选择菜单中移动选定的属性
【发布时间】：2015-01-15 10:46:51
【问题描述】：

我有三个产品页面。让我们将它们识别为热巧克力、摩卡咖啡、浓缩咖啡

每个页面底部都有一个表单，带有相同的选择菜单：

<form>
    <select class="ProductType">
        <option selected>(Please choose)</option>
        <option>Hot Chocolate</option>
        <option>Mocha Coffee</option> 
        <option>Espresso</option>
    </select>
</form>

还有一个周围的 div，其中包含一个唯一的类值，用于标识页面/产品。例如：

<div class="hot-chocolate"> ... </div>

我可以在 div 之外编辑它，但我无法手动更改 form 标记内的任何内容。

是否可以使用 jQuery 将selected 属性动态移动到与当前正在查看的页面匹配的option 上（即在某种程度上匹配周围 div 的类名，即使选项值是带空格的短语）？

【问题讨论】：

标签： jquery select

【解决方案1】：

以下假设您要选择值为“热巧克力”的选项。注意类名区分大小写（必须与选项值的大小写匹配）

Html（注意id属性添加到<div>

<div id="selection" class="Hot-Chocolate"> ... </div>
....
<form>
  <select class="ProductType">
    <option selected>(Please choose)</option>
    <option>Hot Chocolate</option>
    <option>Mocha Coffee</option> 
    <option>Espresso</option>
  </select>
</form>

脚本

var selection = $('#selection').attr('class').replace('-', ' ');
$('.ProductType').val(selection);

参考Fiddle

【讨论】：

这很有效，谢谢。我还有一些其他菜单选项，上面没有显示，它们是三个字长，所以我只需要将replace('-', ' ') 更改为replace(/\-/g, ' ');，以便它替换它的每个实例。
您提到您可以编辑<div>。另一种选择是使用 data 而不是 class 属性，例如<div data-selection="Hot Chocolate" ...> 然后$('.ProductType').val($('#selection').data('selection')); 所以你不必去掉连字符
刚刚阅读了有关数据选择的内容，现在看起来可以安全使用了。好主意和更整洁的解决方案 - 谢谢。