将select (下拉菜单)值分组到公共值下？

Question

例如，如果我有一个下拉菜单，如下所示：

<select>
  <option value="1">1</option>
  <option value="3">3</option>
  <option value="2">2</option>
  <option value="4">4</option>
</select>

我如何分组这些选项，使下拉菜单中显示的选项显示为两个选项，“偶数”或“奇数”，而不是每个单独的值，同时仍然提供相同的结果？

编辑：

澄清了我在上下文中要求的内容：抱歉，因为我的问题(“分组”)中错误的单词选择--我不是试图将值分组到标题下。

我试图把一个1'807值的列表，作为下拉菜单中的一个选项，变成一个下拉菜单，该下拉菜单具有简单的低、中、高值，可以由用户选择。

这些低值、中值和高值将相对于我当前值列表的范围。{即低可以对应0-300，中等300-1000，高1000-1807的数值)。

我的值存储在谷歌融合表中，我试图用它来反映一个地区的犯罪率。下拉菜单中使用的值是每个区域的犯罪率。而不是用户必须筛选1807值和选择具体的。我宁愿把它分组，这样他们就可以看到犯罪率低、中或高的地区。

我有一个工作下拉菜单，允许选择的值突出显示地图上的相关区域。

谢谢你到目前为止的答复。这样更清楚吗？

Answer 1

我不知道你是什么意思，但我想你要么想把你的选择分组：

<select>
    <optgroup label="Odd">
        <option value="1">1</option>
        <option value="3">3</option>
    </optgroup>
    <optgroup label="Even">
        <option value="2">2</option>
        <option value="4">4</option>
    </optgroup>
</select>

..。或者你只想有两个选择：

<select>
  <option value="1,3">odd</option>
  <option value="2,4">even</option>
</select>

更新

我从评论中了解到，问题更多的是如何使用select值，而不是如何将选项分组。

假设我们有一个变量rows，它包含您的1800行数据。您需要基于value属性的这些行的子集，这取决于您在下拉框中选择的内容。

HTML：

<select id="filterOnValue">
    <option value="0,100">Low</option>
    <option value="100,1000">Medium</option>
    <option value="1000">High</option>
</select>

联署材料：

var select = document.getElementById("filterOnValue"),
    rows = [...], // (lots of data)
    selected = rows;

select.onchange = function (e) {
    selected = [];
    filterValues = select.options[select.selectedIndex].value.split(',');
    for(var i = 0; i < rows.length; i++) {
        if(typeof filterValues[1] !== 'undefined') {
            if(rows[i].value >= parseInt(filterValues[0]) && rows[i].value < parseInt(filterValues[1])) {
                selected.push(rows[i]);
            }
        } else {
            if(rows[i].value >= parseInt(filterValues[0])) {
                selected.push(rows[i]);
            }
        }
    }

}

演示：http://jsfiddle.net/wYFCD/

Answer 2

<select>
  <option value="1">odd</option>
  <option value="3">odd</option>
  <option value="2">even</option>
  <option value="4">even</option>
</select>

当有人在下拉菜单中选择时，您将得到value，而不是内部文本。

更新：

在你更新问题后，根据我从你的解释中得到的，你可以这样做-

<select>
  <option value="300">Low</option>
  <option value="1000">Medium</option>
  <option value="1807">High</option>
</select>

当用户选择'Low‘时，您将得到'300’的值。因此，对0-300和Medium 300-1000之间有犯罪率的区域进行处理，等等。

Answer 3

给出名称属性

<select>
  <option value="1" name="odd">1</option>
  <option value="3" name="odd" >3</option>
  <option value="2" name="even">2</option>
  <option value="4" name="even" >4</option>
</select>