CODEWITHSUNDEEP
javascriptjquery
HPWD
HPWD

Reputation: 2240

jQuery Appending item to Select list

I have a form with a select list and if the item the user needs isn't listed, they can add it via another input box and then the item will be appended to the select list. 

$("#misc_userID").effect("transfer", { to: $("#group_misc_available") }, 500);

Now, my problem is if the user enters a multiple word item (e.g. 'John from HP'), the spaces in the phrase don't transfer correctly (see below via FireBug):

<option hp="" from="" value="John">John from HP</option>

I'm using the following jQuery code to append the item from my other question:

$(document).ready(function() {
    $('select').change(function() {
        var $this = $(this);
        $this.siblings('select').append($this.find('option:selected')); // append selected option to sibling
        $('select', this.parent()).each(function(i,v){ // loop through relative selects
            var $options = $(v).find('option'); // get all options
            $options = $options.sort(function(a,b){ // sort by value of options
                return a.value - b.value;
            });
        (this).html($options); // add new sorted options to select
        });
    });   
});

it is almost like I need to encode it before the transfer and then a decode afterwards.

I coudln't get the jsfiddle to work so here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>

<body>
<p>
    <input type="text" name="misc_userID" id="misc_userID" value="" size="30" max="100" />
</p>
<p>
    <input type="button" name="misc_AddUpdate_btn" id="misc_AddUpdate_btn" value="Save Contributor" />
</p>
<p>
    <select name="group_misc_available" size="10" multiple="multiple" id="group_misc_available" class="group_misc_selects_control" style="width:140px;">
        <option value="Option 1">Option 1</option>
        <option value="option 2">Option 2</option>
    </select>
    <img src="../Common/MultiSelect/img/switch.png" width="30" height="30" />
    <select name="group_misc_selected" size="10" multiple="multiple" id="group_misc_selected" class="group_misc_selects_control"  style="width:140px;">
    </select>
</p>
<script>
$(document).ready(function() {
    $('select').change(function() {
        var $this = $(this);
        $this.siblings('select').append($this.find('option:selected')); // append selected option to sibling
        $('select', $this.parent()).each(function(i,v){                 // loop through relative selects
            var $options = $(v).find('option');                         // get all options
            $options = $options.sort(function(a,b){                     // sort by value of options
                return a.value - b.value;
            });
            $(this).html($options);                                     // add new sorted options to select
        });
    });   
    $('#misc_AddUpdate_btn').click(function(){
            var contributor = $('#misc_userID').val();
            if ( (contributor==null) || (contributor=="") ){
                //    do nothing
                alert('You must enter the Miscellaneous Contributor first.');
            }
            else {
                //    console.log('button pressed');
                var path_to_save_contributor = '/vtil/ajax/GroupContributor_Misc_lookup.cfm';
                var data_to_send = 'misc_userID='+contributor;

                $("#misc_userID").effect("transfer", { to: $("#group_misc_available") }, 500);
                setTimeout(function() {AddElement(contributor);}, 500);
            }
        });

        function AddElement(contributor){
                    $('#misc_userID').val('');    // reset value back to null    
                    var UpdateItem=decodeURIComponent(contributor);
                    $("#group_misc_available").append('<option value=' + UpdateItem + '>' + UpdateItem + '</option>');
                }
    });
</script>


</body>
</html>

Upvotes: 0

Views: 1064

Answers (1)

Cat
Cat

Reputation: 67502

Nitpicks:

  • this.parent() should be $this.parent().
  • (this).html($options); should be $this.html($options); (or maybe $(this).html($options);?).

Those aside, John%20from%20HP can be converted to John from HP using unescape(), though I recommend using decodeURIComponent() in this case, instead. (Since you used encodeURIComponent() initially.)

Since you can't encode/decode something recovered by find() (since it's a jQuery object, not a string), you can reorganize your code like so:

$this.find('option:selected')
     .html(decodeURIComponent($this.find('option:selected').html()))
     .appendTo($this.siblings('select'));

You can see the code in action in this jsFiddle (ignored the sorting code here).

If this code still isn't exactly working, we'd need to see an example in action.

Upvotes: 1

Related Questions