Truncate a string of numbers to a certain length
<p>I have the jquery code below that returns a list of ID's like this 1|2|3|4|5|6|7|8|9 and so on for every List item I have on the page, I also have a dropdown selection box named topfriendNumber.  I need to take the value from topfriendNumber dropdown box and make sure my list of ID's does not exceed it.  </p>

<p>So if the dropdown is selected as 4 then it should only allow 4 numbers  1|2|3|4   </p>

<p>Based on this code below can you help?  </p>

<p>This could probably be added into the bottom part where it is already using the number from the dropdown box</p>

<pre><code>&lt;select name="topfriendNumber" id="topfriendNumber"&gt;
    &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;option value="6" selected="selected"&gt;6&lt;/option&gt;
    &lt;option value="9"&gt;9&lt;/option&gt;
    &lt;option value="12"&gt;12&lt;/option&gt;
&lt;/select&gt;

function saveOrder() {
    var serialStr = "";
    $("#topfriends li").each(function (i, elm) {
        serialStr += (i &gt; 0 ? "|" : "") + $(elm).attr("friendID");
    });
    // alert(serialStr);   //1|2|3|4|5|6|7|8|9
    $('select[name=topfriendNumber]').change();
    $.ajax({
        url: "exampe.php/SaveListOrder",
        data: '{"ids":"' + serialStr + '"}',
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8"
    });
};


//changes the background colors depending on the amount selected from the dropdown list
$('select[name=topfriendNumber]').change(function() {
    var val = $(this).val();
    //reset style
    $('ul#topfriends &gt; li').css("background-color", "");
    //apply to all LIs before value of select
    $('ul#topfriends &gt; li:lt(' + val + ')').css("background-color", "red");
}).change();
</code></pre>
