Question

I have a dropdown list and a select list. Both contain quite a few identical items. Basically I am setting the selected value of the dropdown based on the list item index that has been clicked on.

Code for this is:

$('.dropdown-list li').click(function(){
    $('#edit-type option').removeAttr('selected', 'selected');
    var listvalue = $(this).index();
    $('#edit-type option').eq(listvalue).attr('selected', 'selected');
});

This works but its quite slow. There is a 3/4 second delay before the dropdown option becomes selected.

Is there a faster way to do this?

EDIT:

<select id="edit-type" name="type" class="form-select" style="display: none; ">
<option value="All">- Any -</option>
<option value="171">item Name 1 </option>
<option value="172" selected="selected">item Name 2</option>
</select>

<ul class="dropdown-list">
<li><div><span>item Name 1</span></div></li>
<li class="selected"><div><span>item Name 2</span></div></li>
</ul>

My reason for doing this is so I can create a styled dropdown.

Thanks
Robert

Answer 1

You probably have lots of items in the list if it’s that slow. The fastest way should be directly setting the selected index:

$('.dropdown-list li').click(function(){
    var oDDL = $('#edit-type');
    if (oDDL.length > 0)
        oDDL[0].selectedIndex = $(this).index();
});

In case you really have lots of items it also much better to use .on() which will create single handler behind the scenes instead of handler for each list item:

$('.dropdown-list').on('click', 'li', function() {
    //...
});

Live test case.