I need to choose a field that functions similarly to a dropdown box, but does not actually display as one. The select field reveals its values in a pop-up with values and sub-values that I need to select.
Challenges :
I'm struggling to locate the object and cannot successfully select a value from the field.
I attempted to use a CSS selector to identify the object: "div[class='mailval'][title='Breast > Both']". However, this method did not work.
Here is the HTML Code :
<div class="rowDiv ">
<label for="bodypart">Body Part</label>
<div id="bodypart_box_1">
<div style="position:absolute;left:185px;z-index: 20">
<ul class="parent">
<li>
<div id="main" class="mailval">events=Object { click=[1]}handle=function()
<input id="bodypart_1" class="bodypart" type="text" onfocus="if($(this).hasClass('disabled')){$(this).blur();}" readonly="readonly" value="Select One" name="bodypart_1" title="">
<input id="actualBodypart_1" type="hidden" value="Breast" name="actualBodypart_1">
</div>
<ul id="bodyPartList_1" class="top sub bodyPartList" style="display: none;">olddisplay="block"
<li>
<div class="mailval fly" title="Breast" originaltitle="Breast">Breast</div>events=Object { click=[1], mouseover=[1]}handle=function()
<ul>
<li>
<div class="mailval" title="Breast > Both" originaltitle="Breast > NULL > Both">Both</div>events=Object { click=[1], mouseover=[1]}handle=function()
</li>
<li>
<div class="mailval" title="Breast > Left" originaltitle="Breast > NULL > Left">Left</div>events=Object { click=[1], mouseover=[1]}handle=function()
</li>
<li>
<div class="mailval" title="Breast > Right" originaltitle="Breast > NULL > Right">Right</div>events=Object { click=[1], mouseover=[1]}handle=function()
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div style="clear:both"></div>
</div>
<p id="bodypart-error" class="errorMessage ml161px pa ie7ErrorFix" style="top:140px !important"></p>
</div>