Выбрать список изменить выбранное

Question

Я использую http://fezvrasta.github.io/bootstrap-material-design/ для своих списков выбора. Это создает выпадающий список в форме ul с элементами списка в нем и скрывает список выбора. Я думал, что когда вы выбираете элемент списка в ul, это выберет эту конкретную опцию в списке выбора. Но это не так, я пытаюсь заставить это работать.

Это HTML-код, который я использую:

<select class="form-control input-sm dropdown_select dropdown_select_ratio" id="aspect_dropdown" data-dropdownjs="true" style="display: none;">
  <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>

Мой jquery, который я использую, чтобы выбрать опцию в списке выбора:

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

Я получаю ошибку:

Uncaught Error: Syntax error, unrecognized expression: [object Object]option:selected

Answer 1

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>

JQuery

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

Рабочая JSFiddle

http://jsfiddle.net/cq9ccc3t/1/

Измените код, который я изменил согласно вашим требованиям.