how to sort string in jquery

Question

i build a small function its adds drop down value to div, but my requirement it that whenever name add in div it suppose to come in new line and it should be in ascending order, i tried it but i am not reaching up to the solution.

http://jsfiddle.net/a7Y3m/1/

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        var str = "";       
        $('#me').change(function(){
            str += $(this + "option:selected").text() 
            $('#text').text(str)
        })
    });
    </script>
    <style>
    .main {
        margin:0 auto;
        width:500px;
        border:solid 1px #F00;
        height:500px
    }
    #text{ margin-left:50px; margin-top:50px; font:24px/18px Tahoma, Geneva, sans-serif; color:#F00}
    </style>
</head>
<body>
    <div class="main">
        <select id="me">
        <option>first</option>
        <option>second</option>
        <option>third</option>
        <option>fourth</option>
        </select>
        <div id="text"></div>
    </div>
</body>

that's because your jsfiddle is set up wrong: try it now http://jsfiddle.net/a7Y3m/5/ — Bogdan Emil Mariesan, Apr 20 '12 at 06:38

score 5 · Accepted Answer · answered Apr 20 '12 at 06:45

$(function(){   
    var strings = []; // Use an array instead of strings

    $('#me').change(function(){
        // Add the current value to the array
        strings.push($(this + "option:selected").text());
        // Sort the array
        strings.sort();
        var res = "";

        // Concatenate the sorted values of the array
        // and add a newline to each value
        for(var i = 0; i < strings.length; ++i)
            res += strings[i]+' \n';

        // Display the text
        $('#text').text(res);
    });
});

#text{
   white-space:pre; // Don't ignore the newlines.
}

JSFiddle

score 2 · Answer 2 · answered Apr 20 '12 at 07:11

2

Get the selected value + [space] + text already in the div
split them by space, sort, join again

display

$(function(){

$('#me').change(function(){

    str=$(this + "option:selected").text() + ' ' + $('#text').text();
    str = str.split(' ').sort().join(' ');
    $('#text').text(str);
})

})

http://jsfiddle.net/a7Y3m/28/

answered Apr 20 '12 at 07:11

Matthias Tylkowski

517
9
22

Argh too late. Anyway maybe it helps. – Matthias Tylkowski Apr 20 '12 at 07:13

gabitzish · Answer 3 · 2012-04-20T06:52:56.520

Is this what you were looking or : http://jsfiddle.net/a7Y3m/11/ ? (this is sorted by the order in the combobox)

Or this : http://jsfiddle.net/a7Y3m/18/ ? (this is sorted alphabetically)

What I've done:

I've added values to tags :

<select id="me">
<option value='0'>first</option>
<option value='1'>second</option>
<option value='2'>third</option>
<option value='3'>fourth</option>    
</select>

In the javascript, I'm keeping an array with the selected options (var strArr = [];) and at each change event I'm pushing into the array either the value (for sorting by value) either the text (for alphabetically sort). I'm sorting the array then I'm building the string :

strArr.push($(this + "option:selected").val() )
//strArr.push($(this + "option:selected").text() ) //- alphabetically ordered
strArr.sort()
str = "";
for (var i = 0; i < strArr.length; i++) {
   str += $($("option")[strArr[i]]).text(); 
   //str += strArr[i]; //- alphabetically ordered
}

Please include some code, not only a link. JSFiddle could be down and it's not obvious what techniques you used to answer the question unless you follow the link. — Zeta, Apr 20 '12 at 06:47

score 0 · Answer 4 · edited May 23 '17 at 12:03

0

There is Sorting function referring to How may I sort a list alphabetically using jQuery?

I modified this function according to your need.

function sortUnorderedList(ul, sortDescending) {
      if(typeof ul == "string")
        ul = document.getElementById(ul);

      var lis = ul.getElementsByTagName("option");
      var vals = [];

      for(var i = 0, l = lis.length; i < l; i++)
        vals.push(lis[i].innerHTML);

      vals.sort();

      if(sortDescending)
        vals.reverse();

      for(var i = 0, l = lis.length; i < l; i++)
        lis[i].innerHTML = vals[i];
    }
    }

Here is Live Demo:

http://jsfiddle.net/a7Y3m/27/

for acsending Order you have to call

         sortUnorderedList("me",false);

and for descending order

         sortUnorderedList("me",true);

edited May 23 '17 at 12:03

Community

1
1

answered Apr 20 '12 at 06:53

Chinmaya003

474
3
10

You should also add the code to *create* the list, otherwise it won't work. – Zeta Apr 20 '12 at 07:00
I don't understand you, @Zeta. I just edit my jsfiddle and its working fine as previous. Please check and tell if i am doing something wrong. – Chinmaya003 Apr 20 '12 at 07:16
Ah, I get it, you sorted the ` – Zeta Apr 20 '12 at 08:42

how to sort string in jquery

4 Answers4