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值的列表（在下拉菜单中显示为一个选项）转换为一个下拉菜单，该菜单只有用户可以选择的低，中和高值。 / p>

这些低，中和高值将相对于我当前值列表的范围。 {即低可以对应于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>

<强>更新

正如我从评论中理解的那样，问题更多的是关于如何使用选择值，而不是关于如何对选项进行分组。

我们假设我们有一个包含~1800行数据的变量rows。根据您在下拉框中选择的内容，您需要基于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">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>

当用户选择＆＃39; Low＆＃39;时，您会获得价值＆＃39; 300＆＃39;。因此，处理犯罪率介于0-300和＆＃39; Medium＆＃39;之间的区域。 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>

将公共值下的选择（下拉菜单）值分组？

3 个答案: