将选择（下拉菜单）值分组在一个共同值下？

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 值列表转换为仅包含用户可以选择的低、中和高值的下拉菜单。

这些低、中、高值将相对于我当前值列表的范围。 {IE。低可能对应于 0-300、中 300-1000、高 1000-1807 的值。

我的值存储在 Google Fusion Table 中，我试图用它来反映某个地区的犯罪率。下拉菜单中使用的值是每个区域的犯罪率。而不是用户必须筛选 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>

更新

据我从 cmets 了解到，问题更多是关于如何使用选择值，而不是关于如何对选项进行分组。

假设我们有一个变量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>

JS：

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

Answer 3

<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 之间的区域，以此类推。