Unable to select option from dropdown using nightwatch js - ui-automation

Question

I have seen some other posts using below format but it did not work at all, even the select is not opening:
.click(".selectpicker option[value='somevalue']")
But when I wrote like this:
.click("select[id='chooseone']")
it did open the dropdown.
This is how select looks like:
<select class="selectpicker btn dropdown-toggle btn-default" title="Choose one of the following..." id="chooseone" style="">
<option value="chooseone" style="">Choose one</option>
<option value="value1" style="">option 1</option>
<option value="value2" style="">option 2</option>
<option value="value3">option 3</option>
</select>
There is react code in backend, so an onchange event is fired which will display appropriate input field per option and a submit button.
My test is basically:
select an option
fill fields
submit
validate result container
How should I write this code? This is my first time in such thing. Any help is appreciated.
Thanks
UPDATE >>>
This was in Safari and it did not work. But when I installed chromedriver, it did work. Here is the working code:
.click('select[id="searchBySelect"] option[value="any_option_value"]')
This will click the provided option in the select element.

Answer 1

First you need to open the dropdown menu. It looks like you already know this but in any case you would start with:
browser.click('.selectpicker');
Then there are a couple of ways you can get the option you want to click. You can choose a specific option by doing something like this (just modify it to select whichever option you want)
browser.element('css selector', '.selectpicker', function(element) {
browser.elementIdElement(element.value.ELEMENT, 'css selector', 'option[value="value1"]', function(option) {
browser.elementIdClick(option.ELEMENT);
});
});
Or you could get all of the options in an array and click on one of them this way:
browser.elements('css selector', 'option', function(elements) {
browser.elementIdClick(elements.value[0].ELEMENT); //can use any index here as long as you know which one you are looking for
});

Answer 2

tehbeardedone thanks so much for providing your solution. I had to do a small fix to get the elementIdClick() working.
Instead of option.ELEMENT
I had to use option.value.ELEMENT
Since my code snippet had to be added to a page object, this is its final version:
let durationOptionSelector = `option[contains(text(), "${duration}")]`; //dynamic option selector
this.click("#duration_dropdown");
this.api.element("xpath", "#duration_dropdown", function (dropdown) {
this.elementIdElement(dropdown.value.ELEMENT, "xpath", durationOptionSelector, function(option) {
this.elementIdClick(option.value.ELEMENT);
});
});