Question

我有一个包含选项的多重选择

<select id="cart" name="cart" multiple>
    <option price="4.00" name="Green Beans">
    <option price="4.00" name="Green Beans">
    <option price="4.00" name="Green Beans">
    <option price="6.00" name="Blue Beans">
    <option price="7.00" name="Black Beans">
    <option price="7.00" name="Black Beans">
</select>

我想使用javascript对它们进行分组，以便获得

<select id="cart" name="cart" multiple>
    <option price="4.00" name="3x Green Beans">
    <option price="6.00" name="1x Blue Beans">
    <option price="7.00" name="2x Black Beans">
</select>

Answer 1

我的想法：获取所有选项标签，然后使用while循环检查直到标签数组中没有任何项。

在循环内部，我们尝试将数组第一项中的price属性与其他项的price属性进行比较。获取后，将它们推入result数组。

然后，我们使用新循环将name属性更新为特定标签，并删除重复的标签。

您可以使用F12来检查结果中的html代码。

结果：

<select id="cart" name="cart" multiple="">
  <option price="4.00" name="3x Green Beans">Item 1</option>
  <option price="6.00" name="1x Blue Beans">Item 4</option>
  <option price="7.00" name="2x Black Beans">Item 5</option>
</select>

var options = Array.from(document.querySelectorAll('option'));

var result = [];

while (options.length) {
  var price = options[0].getAttribute('price');

  var items = options.filter(x => x.getAttribute('price') === price);
  
  items.forEach(x => options.splice(options.findIndex(e => e.getAttribute('price') === x.getAttribute('price')),1));
  
  result.push(items);
}

for (var items of result) {
  var price = items[0].getAttribute('price');
  
  var prices = Array.from(document.querySelectorAll(`[price='${price}']`));
  
  var name = prices[0].getAttribute('name');
  
  prices[0].setAttribute('name', `${prices.length}x ${name}`);
  
  var temp = prices.filter((x, y) => y);
  
  temp.forEach(x => x.remove());
}

<select id="cart" name="cart" multiple>
  <option price="4.00" name="Green Beans">Item 1
  <option price="4.00" name="Green Beans">Item 2
  <option price="4.00" name="Green Beans">Item 3
  <option price="6.00" name="Blue Beans">Item 4
  <option price="7.00" name="Black Beans">Item 5
  <option price="7.00" name="Black Beans">Item 6
</select>

Answer 2

请参见下面的内联注释，但要警告您现有的HTML无效，因为不存在诸如price之类的属性，而对于带有select的属性，您应该关闭option标签，并且option元素应包含要显示的默认文本。

// Convert initial options to an array
let input = 
  Array.prototype.slice.call(document.querySelectorAll("#cart > option"));
  
let output = []; // Prepare final array

// Loop over initial array
input.forEach(function(item, pos) {
    let sItem = item.outerHTML; // Convert DOM element to string
    
    // If output array doesn't contain input string...
    if(output.indexOf(sItem) == -1){
      output.push(sItem);  // Add it to the output array
    }
});

// Replace the select with the output
document.getElementById("cart").innerHTML = output.join("");

<select id="cart" name="cart" multiple>
  <option value="4.00">Green Beans</option>
  <option value="4.00">Green Beans</option>
  <option value="4.00">Green Beans</option>
  <option value="6.00">Blue Beans</option>
  <option value="7.00">Black Beans</option>
  <option value="7.00">Black Beans</option>
</select>

组选项项目javascript

2 个答案: