0

我构建了一个小函数，它向 div 添加下拉值，但我的要求是，每当在 div 中添加名称时，它都应该进入新行并且它应该按升序排列，我尝试了它，但我没有达到解决方案.

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>
4

4 回答 4

5 
$(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

于 2012-04-20T06:45:24.187 回答
2
  1. 获取所选值 + [空格] + div 中已有的文本
  2. 按空格分割它们，排序，再次加入

  3. 展示

    $(函数(){

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

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

    })

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

于 2012-04-20T07:11:58.653 回答
1

这是您正在寻找的还是：http: //jsfiddle.net/a7Y3m/11/？（这是按组合框中的顺序排序的）

或者这个：http: //jsfiddle.net/a7Y3m/18/？（这是按字母顺序排序的）

我做了什么：

我已经为标签添加了值：

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

在 javascript 中，我使用所选选项（var strArr = [];）保存一个数组，并且在每个更改事件中，我将值（用于按值排序）或文本（用于按字母顺序排序）推入数组）。我正在对数组进行排序，然后我正在构建字符串：

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
}
于 2012-04-20T06:41:01.390 回答
0

有排序功能指的是 如何使用 jQuery 按字母顺序对列表进行排序？

我根据您的需要修改了此功能。

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];
    }
    }

这是现场演示：

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

要添加订单，您必须致电

         sortUnorderedList("me",false);

和降序

         sortUnorderedList("me",true);
于 2012-04-20T06:53:10.360 回答