SELECT - dropdown.js - Manage Selected Item

by bizamajig

HTML

<select class="form-control input-sm dropdown_select dropdown_select_ratio" id="aspect_dropdown" data-dropdownjs="true" style="display: block;">
  <option value="4:3">4:3</option>
  <option value="3:2">3:2</option>
  <option selected="selected" value="16:9">16:9</option>
  <option value="17:9">17:9</option>
  <option value="21:9">21:9</option>
</select>

<div class="dropdownjs">
    <input type="text" readonly="" class="form-control input-sm dropdown_select dropdown_select_ratio focus" />
    <ul placement="bottom-left" style="max-height: 748px;">
        <li value="4:3" tabindex="-1">4:3</li>
        <li value="3:2" tabindex="-1" class="selected">3:2</li>
        <li value="16:9" selected="selected" class="" tabindex="-1">16:9</li>
        <li value="17:9" tabindex="-1">17:9</li><li value="21:9" tabindex="-1">21:9</li>
    </ul>
</div>

JavaScript

$('.dropdownjs ul li').click(function(){
    var selectedvalue = $(this).attr('value');
    var selected = $(this).parent().parent().prev('.dropdown_select');
    setTimeout(function() {
        console.log(selectedvalue);
        $(selected[0]).find('option:selected').removeAttr('selected');
        $(selected[0]).val($(selected[0]).find('option[value="' + selectedvalue + '"]').val()).trigger('change');
        $(selected[0]).find('option[value="' + selectedvalue + '"]').attr('selected', 'selected');
    }, 100);
})