Javascript, change selected item in combobox

Question

I am trying to change the selected item in a combobox using javascript but it doesn't seem like the normal kind of dropdown list in HTML. I have tried to find answers online but only found them for different kinds of dropdown lists. Thank you to anyone who helps me.

Here is the code:

<span class="widget-wrapper" >
<span class="off-screen module-js-ignore" id="dropdown_aria_label_1">
<span>Select Quantity</span>
<!--[if lte IE 8]><span class="dropdown-ie-value module-js-ignore">__</span><![endif]-->
</span>
<span class="widget-theme margin10R " id="quantity_select" style="" role="application">

<span tabindex="0" class="widget-dropdown module-js-ignore" role="combobox" aria-expanded="false" aria-labelledby="dropdown_aria_label_1" aria-describedby="dropdown_current_value_1" aria-valuetext="__" aria-owns="dropdown_aria_list_1" aria-haspopup="true"><!--[if lte IE 7]><span class="off-screen dropdown-ie-value module-js-ignore">__</span><![endif]--><span><b><b class="widget-default-color dropdown-selected-label module-js-ignore" style="" aria-live="assertive" id="dropdown_current_value_1" role="status">__</b></b></span></span>
<div class="dropdown-options-form " style="display:none;position:absolute;z-index:100">

<ul class="widget-dropdown-list module-js-ignore" id="dropdown_aria_list_1" role="listbox">



    <li tabindex="0" class=" dropdown_default_option " role="option" aria-disabled="false" aria-selected="true" data-value=""><span class="dropdown_option_text dropdown_option_selected_text">__</span></li>


    <li tabindex="0" class="" role="option" aria-disabled="false" aria-selected="false" data-value="1"><span class="dropdown_option_text dropdown_option_selected_text">1</span></li>


    <li tabindex="0" class="" role="option" aria-disabled="false" aria-selected="false" data-value="2"><span class="dropdown_option_text dropdown_option_selected_text">2</span></li>


    <li tabindex="0" class="" role="option" aria-disabled="false" aria-selected="false" data-value="3"><span class="dropdown_option_text dropdown_option_selected_text">3</span></li>


    <li tabindex="0" class="" role="option" aria-disabled="false" aria-selected="false" data-value="4"><span class="dropdown_option_text dropdown_option_selected_text">4</span></li>


    <li tabindex="0" class="" role="option" aria-disabled="false" aria-selected="false" data-value="dd_template"><span class="dropdown_option_text dropdown_option_selected_text">dd_template</span></li>


</ul>

</div>

Answer 1

Use the following process:

• Find the element with the attribute aria-selected="true"
• Change its aria-selected="true" to aria-selected="false"
• Find the target of the event
• Change its aria-selected="false" to aria-selected="true"