Select box losing selected option when refreshed

Question

I'm trying to create a select box that refreshes its options when selected by the user, but I'm encountering a problem that I can't figure ho to solve. Being still a beginner with jquery I've already asked an advice for the same program: Keeping selected an option in select dropdown with jquery after refresh.

Following the suggestion now it works almost completely, but I'd like the dropdown to behave exactly as a non dynamic one, keeping the selected option when opened, except for having the options list also refreshed: now it “almost” keeps the value selected (it retains it in the dropdown) but resets to the first option when the element lose focus to others in the page and I don't know how to resolve the problem. I tried to pass a variable with ajax to the php page to have it selected on refresh, but it still resets when focus is change.

The JS code:

$(document).ready(function() {
$("#UsersDiv").focusin(function() {
        var UsersSelect = $('#UsersList').val();
        $.get( 
            "userlist.php",
            { UserSelect1: UsersSelect },
            function(data) {
            $('#UsersList').html(data);
            }
        );
    })
    $('#UsersList').val(UsersSelect);
});

The html page:

<div name="UsersDiv" id="UsersDiv">
<select name="UsersList" id="UsersList">
<option value="User1">User1</option>
<option value="User2">User2</option>
</select>
</div>

The php file (the “users” array is in place of the sql query, both work properly):

$UserSelect1 = $_GET['UserSelect1'];
$users=array( 'User1','User2','User3','User4','User5');

echo '<select name="UsersList" id="UsersList">';

foreach($users as $list):
echo '<option value="'.$list.'" ';
if ($UserSelect1 == $list) {
    echo 'selected=selected';
}
echo '>'.$list.'</option>';
endforeach;

echo '</select>';

Thanks to everyone for the answers.

pushOk pushOk · Accepted Answer · 2013-12-18T11:58:39

$("#UsersDiv")

than you assigning this

 $select=$(this) // $select is $("#UsersDiv");

and than you are trying to get val from div

 UsersSelect = $select.val() // $select.val() is undefined

Select box losing selected option when refreshed

1 Answers