Question

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

每个页面的底部都有一个表单，其中包含相同的选择菜单：

<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的类名，甚至当选项值是带空格的短语时？）

Answer 1

以下假设您要选择值为＆＃34; Hot Chocolate＆＃34;的选项。请注意，类名称区分大小写（必须与选项值的大小写匹配）

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

使用jQuery在选择菜单中移动所选属性

1 个答案: