0

選択リストに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
4

1 に答える 1

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/

要件に従って、変更したコードを変更します。

于 2015-03-24T16:47:02.977 に答える