Simple multiple selection checkbox dropdown that passed variables to the url - php

Question

I want to create a very simple (no plugins and basic layout) for a dropdown menu that has checkboxes for options. For example, if C and F are selected and the form is submitted, I want the url to show /index.php?category1=3&&category2=6
<form action="" method="get">
<select multiple="multiple" name="category">
<optgroup label="Category1">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</optgroup>
<optgroup label="Category2">
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</optgroup>
</select>
<br><input type="submit" value="go">
</form>
I am not even sure how to start the jquery to pass the values to the url. Any help is much appreciated!
EDIT:
I figured I can do this using instead and simulate a dropdown with jquery.
Here is the jsfiddle: http://jsfiddle.net/k6R7g/
how can I show "2 Selected" instead of "Select..." when selections are made?

Answer 1

See code below, construct the url yourself and it will work. In case the form contains more values you can better add the category to the value of the option.
<form method="get">
<select multiple="multiple" name="category">
<optgroup label="Category1">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</optgroup>
<optgroup label="Category2">
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</optgroup>
</select>
<br><input type="button" value="go" onclick="clicked();">
</form>
<script type="text/javascript">
function clicked(){
var v = "";
$('select').find(":selected").each(
function(){
if (v != ""){
v += "&";
}
v += $(this).parent()[0].label + '=' + $(this).context.value;
}
);
window.location.href = "index.php?" + v;
}
</script>