andre de waard andre de waard - 6 months ago 29
HTML Question

select list change selected

I'm using http://fezvrasta.github.io/bootstrap-material-design/#dropdown-menu
for my select lists.
This generates a dropdown in the form of an ul with list items in it and hides the select list.
I thought that when you select a list item in the ul this will select that specific option in the select list.
But it doesn't so I'm trying to get this to work.

This is the HTML I'm using:

<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>


This will be generated beneath it and hides the above select list:

<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>


My jquery that I'm using to select the option in the selectlist:

$('.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);
})


I get the error:

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

Answer

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);
})

Working JSFiddle

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

Alter the code I've modified as per your requirements.