Using Selenium (C#) Select an item from a drop down by text

Question

I have been trying to figure this out and could use some help from Selenium experts here. I have a dropdown on my page that I am trying to select an option for from the test and I cant seem to get this right. I have tried the following example I see commonly for select Item. The options always show text as an empty string "" even though I can see in the HTML markup the option text is there.

wait.Until(d => ExpectedConditions.ElementExists(By.Id("Cars")));
var carStatusDropDown = new SelectElement(_driver.FindElement(By.Id("Cars")));
carStatusDropDown.SelectByText(filter.CarStatus);

I figured its because maybe the options are not visible to the browser, so then I tried to click on the button next to dropdown (Bootstrap) so it would be open before it selects the text

wait.Until(ElementIsClickable(By.XPath("/html/body/div[2]/div[2]/div/div[2]/div[1]/div/form/fieldset/div[3]/div/div[1]/span[2]/div/div/span")));
IWebElement ddlButton = _driver.FindElement(By.XPath("/html/body/div[2]/div[2]/div/div[2]/div[1]/div/form/fieldset/div[3]/div/div[1]/span[2]/div/div/span"));
ddlButton.Click();

wait.Until(d => ExpectedConditions.ElementExists(By.Id("Cars")));
var carStatusDropDown = new SelectElement(_driver.FindElement(By.Id("Cars")));
carStatusDropDown.SelectByText(filter.CarStatus);

I can see the ddlButton opens the dropdown but am still getting >OpenQA.Selenium.ElementNotVisibleException when it tries to SelectByText . In VS I can see the the options text still shows "" and the Displayed property is false for them. How can I find the options, Any feedback would be appreciated, I am posting the HTML below whats weird is that there are two drop downs one as a <ul> and a <select> one the appears below, I am trying to access the <select> one in the test code. The select one in firebug shows up as faded in the markup?!?

HTML:

<div class="combobox-container">
   <input type="hidden" name="Estimate.EstimateStatus" value=" ">
   <input type="text" autocomplete="off"  
      placeholder="All"class="combobox">
   <ul class="typeahead typeahead-long dropdown-menu" style="top:   
      112px;left: 445.117px; display: none;">
      <li data-value="Approved" class=""><a href="#"><strong>
         </strong>A<strong></strong>p<strong></strong>p<strong>
         </strong>r<strong></strong>o<strong></strong>v<strong>
         </strong>e<strong></strong>d<strong></strong></a>
      </li>
      <li data-value="Hold" class=""><a href="#"><strong>
         </strong>H<strong>
         </strong>o<strong></strong>l<strong></strong>d<strong></strong>
         </a>
      </li>
      <li data-value="In Progress"><a href="#"><strong></strong>I<strong>
         </strong>n<strong></strong> <strong></strong>P<strong>
         </strong>r<strong></strong>o<strong></strong>g<strong>
         </strong>r<strong></strong>e<strong></strong>s<strong>
         </strong>s<strong></strong></a>
      </li>
      <li data-value="Not Reviewed" class="active">
         <a href="#"><strong></strong>N<strong>
         </strong>o<strong></strong>t<strong></strong> <strong>
         </strong>R<strong></strong>e<strong></strong>v<strong>
         </strong>i<strong></strong>e<strong></strong>w<strong>
         </strong>e<strong></strong>d<strong></strong></a>
      </li>
      <li data-value="Rejected"><a href="#"><strong></strong>R<strong>
         </strong>e<strong></strong>j<strong></strong>e<strong>
         </strong>c<strong></strong>t<strong></strong>e<strong> 
         </strong>d<strong></strong></a>
      </li>
   </ul>
   <span class="add-on btn dropdown-toggle" data-dropdown="dropdown">
   <span class="caret"></span>
   <span class="combobox-clear">
   </span>
</div>
<select id="Cars" class="combobox" 
   onchange="javascript:OnCarsStatusChanged();" style="display: none;">
   <option value=" " selected="selected">All</option>
   <option value="3ad8cf29-f0b7-441f-
      81bc-c5cfe7c0d73d">Approved</option>
   <option value="19b573c8-fc88-4abe-9c19-9ffc580a1ffe">Hold</option>
   <option value="e3a8b2bd-c3eb-47c3-95e7-f15da2f3d25b">In      
      Progress
   </option>
   <option value="962e4bce-1ca5-404f-b7a0-6a3a42ad91a0">Not 
      Reviewed
   </option>
   <option value="c110e83a-5a93-4553-
      a907-02a47ca97467">Rejected</option>
</select>

Answer 1

It does seems like there is another action depended on this dropdwon. By default this dropdown is NOT visible. So, best will be to see what previous action makes it visible.

However, another workaround can be to execute a simple javascript, make the dropdown list visible and select the intended element you need. removeAttribute should remove the style attribute to make the list visible.

((IJavaScriptExecutor)Driver).ExecuteScript("document.getElementById('Cars').removeAttribute('style');");

By id = By.Id('Cars');
var carStatusDropDown = new SelectElement(_driver.FindElement(id));
carStatusDropDown.SelectByText(filter.CarStatus);