Question

First of all I am sorry if such problem has been asked because I have been searching for many many hours. Please bear with my problem. Let me elaborate. I am dynamically adding options to a select element with “value” attribute as simple 10 digit phone number like 7465768574 & text as “Name(PhoneNumber)” which when user chooses, is added to an unordered list to show Users selected option. To remove that list item I have provided an image which on clicking first checks that there is a corresponding option in the select element & then removes the same list item from the unordered list & removes the corresponding option from the select element. NOW, to accomplish this I am checking the ‘value’ attribute. Problem is that if that value attribute is big number like a phone number, my logic fails because jQuery cant extract that value properly. if its a really big number it returns 0, if its something in range of 6,000,000,000 to 7,000,000,000 ( comma isnt there in value ) it returns some random number. I dont know what the problem is. Is it something to do with type of value or something.

<select multiple="multiple" id="select1">  
     <option class="selectedoptions" value="8234567890">Joker(8234567890)</option>  
     <option class="selectedoptions" value="2">Batman(2)</option>  
     <option class="selectedoptions" value="3">Superman(3)</option>  
     <option class="selectedoptions" value="4">Spiderman(4)</option>
     <option class="selectedoptions" value="5">Ironman(5)</option> 
     <option class="selectedoptions" value="6">Thor(6)</option> 
     <option class="selectedoptions" value="7">Loki(7)</option>
</select>  

My jQuery code is

        function removeSelected() {
            var check = $(this).parent().attr('value');
            var parent = $(this).parent();
            $('#select2 option').each(function () {
                if ($(this).attr('value') == check) {
                    $(this).remove().appendTo('#select1');
                    parent.remove();
                    return true;
                }
                return true;
            });
            return true;
        }

When I debug this code with FireBug, I can see that for larger numbers , “check” is 0, & for some range lesser than 8,000,000,000 its returning random numbers. For smaller numbers its working perfectly.

Also if I try .val() instead of .attr(‘value’) firebug show error

TypeError: (c.value || "").replace is not a function

Thanks in advance guys.

EDIT 1: Okay. It seems my jQuery code which is dynamically adding the List Item is introducing random number as value in the list Item. But the problem remains same.. I can see my code ( through firebug) adding proper value while creating List Item but the generated List Item does not reflect it.

EDIT 2: In response to Mr. ronalchn. I am sorry. a context is needed. What I have are following. 2 select elements “select1” & “select2” & an unordered list “selectedlist”. Users can choose options from “select1” & move it to “select2”. & “select2” options will/should reflect as list items of “selectedlist”. I have a function removeSelected bound to an image inside the list item.

<li class="selectedlistItems" value="8123456789">
Joker(8123456789)
<a class="search-choice-close" href="#"> </a>
</li>

Now in function I am trying to iterate through the options of “select2” & check which of its options have the same value as this list item has. “check” is list item’s “value” &

$(this).attr('value')

is “select2 option” value.
if it matches then

$(this).remove().appendTo('#select1');

removes the “select2 option” & appends it to “select1”
where as

parent.remove();

removes the list item, so that the unordered list always reflects the “select2” element.

I guess this context will be good enough to understand what I am trying to do. I am new to jquery & generally I post questions, I just find answer , this is my first question ever. I am already thankful for such fast response.

EDIT 3 : Check this jsFiddle to understand the situation. http://jsfiddle.net/ygaurav/vUgym/

Answer 1

This is because, when you are assigning it to the 'value' property of the <li> element, this 'value' is of a 'number' type. Which is why it causes overflow and you get a garbage value back.

Why not to use custom attribute, what I mean by that is instead of 'value' use some other custom attribute. Ex. say 'toonId'

$('#list').append($("<li></li>").html(Joker(8123456789)'<a class=search-choice-close href=#></a>').attr('toonId', "8234567890"));

When rendered this is how it will look :

<li class="selectedlistItems" toonId="8234567890">Joker(8123456789)<a class="search-choice-close" href="#"> </a></li>

This will add a new attribute to the <li> item and you can access the 'toonId' property later wherever you want.

Hope this will help.