Select option group selecting entire row

Select option group selecting entire row

Hello Guys,

I need some help with a select box and choosing the entire row.

So I'm using option group inside a select box like this( see below). I'm creating rows.
<optgroup><option value="1">1</option></optgroup>
<optgroup><option value="2">1</option></optgroup>
<optgroup><option value="3">1</option></optgroup>

The select box will look like this

1               2                  3

1               2                  3

1               2                 3


I want to be able to kind of bind the entire row, meaning when i click on 1, 2 or 3 that the entire row is selected and acts as a normal select option.

I've added the following code which half way works. Is there a way that I can kind of bind the entire row as one, plus using the down arrow will select the entire row as it goes down the list.

$j("optgroup").on("click", function() {
               
               
                // alert("clicked");
               
               
                $j(this).children("option").prop("selected", "selected");
                $j(this).next().children("option").prop("selected", true);
                $j(this).next().next().children("option").prop("selected", true);
               
                $j(this).prev().children("option").prop("selected", "selected");
                $j(this).prev().children("option").prop("selected", true);
                                           
                alert = function() {};

Thanks in advance.