Geek asks and answers

Update options for selected click in chrome

I found a problem with chrome when trying to update the parameters of the select element when the user clicks on the specified select element. The system I'm working on mostly works according to the JSFiddle below, except that the list of options is obtained through an ajax call, but even using the object gives the same result.

What happens is that when the user clicks and displays the parameters, he displays only 1 option. Then he will fill in the list of options, but will not update the number of displayed ones.

If you use the arrow keys to move up or down, you can actually select other options. The only way I can find is to click on the selection item and click it again.

It works great in IE and Firefox.

JSFiddle can be found here: http://jsfiddle.net/Largoh/Thz55/

HTML

<select id="selector">
    <option value="2" selected>Option 2</option>
</select>

Javascript

$(function() {
    $("#selector").click(function() {
        if($("option", this).length < 2)
            GetOptions(this);
    }); 
});

function GetOptions(select) {
    var Options = [
        { id: 1, text: "Option 1"},
        { id: 2, text: "Option 2"},
        { id: 3, text: "Option 3"},
        { id: 4, text: "Option 4"},
        { id: 5, text: "Option 5"},
        { id: 6, text: "Option 6"},
        { id: 7, text: "Option 7"}
        ];
    $('option:first', select).remove();
    for(var i = 0; i < Options.length;i++)
    {
        var option = $("<option/>");
        option.val(Options[i].id).text(Options[i].text);
        $(select).append(option);
    }
}
+3
source share
1 answer

Chrome does not update the user interface when opening options and updating options, so you can bypass it by blurring the element and focusing it again:

// Update the options first
$('option:first', select).remove();
for(var i = 0; i < Options.length;i++)
{
    var option = $("<option/>");
    option.val(Options[i].id).text(Options[i].text);
    $(select).append(option);
}
// Take focus away from the select
$(select).blur();
// Force the dropdown to open:
// http://stackoverflow.com/questions/10453393/how-to-open-the-select-input-using-jquery
var e = document.createEvent("MouseEvents");
e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
select.dispatchEvent(e);

http://jsfiddle.net/as68Y/

Keep this approach in mind though, especially if the data source is AJAX - what if I press "Option 1" and it suddenly changes to "Option X". Not a great user interface. You better disconnect the item selectduring this operation.

+3
source

More articles:


All Articles