Geb: how do I select a value from a dropdown?

Question

I'm having great difficulty with one piece of my Geb test; how to select a value from a dropdown. I've tried it four different ways, and none of these work. It will either crash the test or skip right over it. Any help would be appreciated

HTML Form element (102727 is the id for California in the db table...)

<div class="col-sm-2">
    <label id="submitterState-label" class="toplabel" for=submitterState>State</label>
    <g:select name="submitterState" id="submitterState" from="stuff here..." class="form-control" optionKey="id" value="morestuff" noSelection="['null':'']" aria-labelledby="submitterState-label"/>
</div>

Resulting HTML:

<div class="col-sm-2">
        <label id="submitterState-label" class="toplabel" for=submitterState>State</label>
        <select name="submitterState" id="submitterState" class="form-control" aria-labelledby="submitterState-label" >
<option value="null"></option>
<option value="102722" >Alabama</option>
<option value="102723" >Alaska</option>
<option value="102724" >American Samoa</option>
<option value="102721" >APO Address - AA</option>
<option value="102725" >Arizona</option>
<option value="102726" >Arkansas</option>
<option value="102727" >California</option>
<option value="102728" >Colorado</option>
<option value="102729" >Connecticut</option>
<option value="102730" >Delaware</option>
<option value="102731" >District of Columbia</option>
<option value="102732" >Florida</option>
<option value="102733" >Georgia</option>
<option value="102734" >Guam</option>
<option value="102735" >Hawaii</option>
<option value="102736" >Idaho</option>
<option value="102737" >Illinois</option>
<option value="102738" >Indiana</option>
<option value="102739" >Iowa</option>
<option value="102740" >Kansas</option>
<option value="102741" >Kentucky</option>
<option value="102742" >Louisiana</option>
<option value="102743" >Maine</option>
<option value="102744" >Maryland</option>
<option value="102745" >Massachusetts</option>
<option value="102746" >Michigan</option>
<option value="102747" >Minnesota</option>
<option value="102748" >Mississippi</option>
<option value="102749" >Missouri</option>
<option value="102750" >Montana</option>
<option value="102751" >Nebraska</option>
<option value="102752" >Nevada</option>
<option value="102753" >New Hampshire</option>
<option value="102754" >New Jersey</option>
<option value="102755" >New Mexico</option>
<option value="102756" >New York</option>
<option value="102757" >North Carolina</option>
<option value="102758" >North Dakota</option>
<option value="102759" >Northern Mariana Islands</option>
<option value="102760" >Ohio</option>
<option value="102761" >Oklahoma</option>
<option value="102762" >Oregon</option>
<option value="102763" >Pennsylvania</option>
<option value="102764" >Puerto Rico</option>
<option value="102765" >Rhode Island</option>
<option value="102766" >South Carolina</option>
<option value="102767" >South Dakota</option>
<option value="102768" >Tennessee</option>
<option value="102769" >Texas</option>
<option value="102770" >U.S. Virgin Islands</option>
<option value="102771" >Utah</option>
<option value="102772" >Vermont</option>
<option value="102773" >Virginia</option>
<option value="102774" >Washington</option>
<option value="102775" >West Virginia</option>
<option value="102776" >Wisconsin</option>
<option value="102777" >Wyoming</option>
</select>

Geb tests (none of these work...):

$('#submitterState').value(102727)
    $("form").submitterState = 102727 
    $('select', name: "submitterState").value(102727) 
    $('div.col-sm-2').find('select', name: "submitterState").value(102727)

Answer 1

I've found emulating the user exactly is the best way to do this. First click on the <select>, then click on the <option> that you want.

$('#submitterState').click()
$('#submitterState').find("option").find{ it.value() == "102727" }.click()

Obviously this looks way nicer in a method call, but this should get you going.