select 列表更改 selected

Question

我正在使用 http://fezvrasta.github.io/bootstrap-material-design/#dropdown-menu 对于我的 select 列表。这会生成一个 ul 形式的下拉列表，其中包含列表项并隐藏 select 列表。我认为当您 select ul 中的列表项时，这将 select select 列表中的特定选项。但事实并非如此，所以我正在努力让它发挥作用。

这是我正在使用的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>

这将在它下面生成并隐藏上面的 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 select select 列表中的选项：

$('.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/

根据您的要求修改我修改过的代码。

select 列表更改 selected

select list change selected

html

css

jquery

twitter-bootstrap

bootstrap-material-design