jQ - Select Demo

by Dragan Gaić

HTML

<link rel="stylesheet" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.css">
<link rel="stylesheet" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css">
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
</head>
<body>
    <select id="id_user" name="user" multiple="multiple">
        <option value="1">User 1</option>
        <option value="2">User 2</option>
        <option value="3">User 3</option>
        <option value="4">User 4</option>
    </select><br>
    
    <span id="select1">Select 1 user</span> <span id="remove1">Remove 1 select</span><br>
    <span id="select2">Select 2 user</span> <span id="remove2">Remove 2 select</span><br>
    <span id="select3">Select 3 user</span> <span id="remove3">Remove 3 select</span><br>
    <span id="select4">Select 4 user</span> <span id="remove4">Remove 4 select</span>
</body>
</html>

JavaScript

$("#select1, #select2, #select3, #select4").click(function(){ 
    $("#id_user option[value='" + $(this).attr('id').replace("select","") + "']").prop("selected", true);
});
$("#remove1, #remove2, #remove3, #remove4").click(function(){ 
    $("#id_user option[value='" + $(this).attr('id').replace("remove","") + "']").prop("selected", false);
});