时间戳

首页 > 解决方案 > 分组选项 javascript

javascript - 分组选项 javascript

问题描述

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

<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>

标签： javascripthtmlselectgroupingoptions

解决方案

请参阅下面的内联注释，但请注意，您现有的 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>

推荐阅读