Question

我有很多带有一个div的SELECT元素。我想这样做：

从这些选项值创建链接。例如：

Color: Black Green Pink ...

Size: S M L ...

Quantity: 1 2 3 4 ...
点击链接时，链接值在组合框中被选中，值应显示在顶部：

Selected: Color - White, Size - S, Quantity - 3
链接应跳过第一个选项（颜色，大小等）。

` 颜色：黑色绿色粉橙子紫色白色黄色蓝色海军奶油

<select name="5043:finopt:1" size=1 >
    <option value="Size:" selected>Size:</option>
    <option value="S" >S</option>
    <option value="M" >M</option>
    <option value="L" >L</option>
    <option value="XL" >XL</option>
</select>

<select name="5043:finopt:1" size=1 >
    <option value="Size:" selected>Quantity</option>
    <option value="1" >1</option>
    <option value="2" >2</option>
    <option value="3" >3</option>
    <option value="4" >4</option>
</select>

`

select元素的名称也总是不同的，并不总是5043：finopt：1

Answer 1

首先，您必须添加一种方法来识别每个下拉框。既然你说他们的name属性总是不同的，你必须添加另一种方法来识别它们。我们尝试在每个属性中添加data-name属性（您可以使用任何名称）。

其次，你说＆＃34;链接应该跳过第一个选项＆＃34;。我解释这一点，因为您不希望用户能够选择第一个选项（例如颜色，大小，数量）。您可以通过在其上添加disabled标记来使这些选项无法选择。

<select name="5043:finopt:1" size=1 data-name="size">
  <option selected disabled>Size:</option>
  ...
</select>

要在点击链接时从下拉框中选择正确的值，您可以添加此jQuery代码段（假设每个链接文本的格式始终为Selected: Color - White, Size - S, Quantity - 3）：

$('a.select').on('click', function(e) {
  e.preventDefault();
  var text = $(this).text();
  text = text.substring(text.indexOf(' ') + 1).split(',');
  for (var i = 0; i < text.length; i++) {
    var pair = text[i].trim().split(' - ');
    $('select[data-name="' + pair[0].toLowerCase() + '"]').val(pair[1]);
  }
});

修改

由于选择框标记无法修改，您想通过第一个选项选择它们，您可以这样做：

$('a.select').on('click', function(e) { e.preventDefault(); var text = $(this).text(); text = text.substring(text.indexOf(' ') + 1).split(','); for (var i = 0; i < text.length; i++) { var pair = text[i].trim().split(' - '); var a = $('select').filter(function() { return $(this).children().first().text() == pair[0] + ':'; }).val(pair[1]); } });

从链接设置（选择）下拉元素

1 个答案: