Grouping select (dropdown menu) values under a common value?

Question

If I have a dropdown menu that looks like for example:

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

How could I group these options so that the options presented in the dropdown menu would appear as two options, "even" or "odd" instead of each separate value whilst still providing the same results?

EDIT:

Clarification of what I am asking in the context: Sorry for the bad word choice in my question ("grouping") I am not trying to group tag the values under headers.

I am trying to turn a list of 1'807 values, that appear as an option in the drop down menu, into a drop down menu that simply has Low, Medium and High values that can be selected by a user.

These low, medium and high values will be relative to the range of my current list of values. {i.e. Low could correspond to values from 0-300, Medium 300-1000, High 1000-1807).

My values are stored in a Google Fusion Table which I am trying to use to reflect the crime rates of an area. The values being used in the drop down menu are the crime rate for each area. Instead of the user having to sift through 1807 values and select specifics. I'd rather this was grouped so they can view areas of low, medium or high crime rates.

I have a working drop down menu that allows for the value selected to highlight the related area on a map.

Thanks for the replies thus far. Is this clearer?

Answer 1

I'm not sure what you mean, but I think you either want to group you options:

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

... or you want to just have two options:

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

Update

As I understand from the comments the question was more about how to use the select-value, not so much about how to group the options.

Let's say we have a variable rows that contains your ~1800 rows of data. And you want a subset of these rows based on a value property, based on what you select in your dropdown box.

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]);
            }
        }
    }

}

Demo: http://jsfiddle.net/wYFCD/

Answer 2

give the name attribute

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

When someone selects in drop down you will get value not the inner text.

Update:

After you updated the question, as per what I get from you explanation, you can do like this-

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

When user chooses 'Low', you get the value '300'. Thus, process the areas which have crime rate between 0-300 and for 'Medium' 300-1000 and so on.