Question

我正在使用http://fezvrasta.github.io/bootstrap-material-design/#dropdown-menu 对于我的选择列表。这将生成一个带有列表项的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/

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

选择列表更改

1 个答案: