根据文本框中重新排列的无序列表获取值

时间:2013-03-11 13:19:45

标签: javascript jquery

我想根据无序列表中列表项的顺序在文本字段中排列值。 列表如下: -

<ul id="sort">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

我在上面提到的列表中使用了Jquery UI的sortable()函数。 我需要在文本框值中复制相同的排列: -

<input type="text" value="" />

例如 - 如果列表重新排列为3,2,5,4,1,则文本框值应为3,2,5,4,1: -

<input type="text" value="3,2,5,4,1" />

提前致谢!

3 个答案:

答案 0 :(得分:0)

例如:

$('#sort').sortable({
    update: function(e, ui) {
        var val = $(this).children().map(function() {
            return $(this).text();
        }).get().join();
        $('#text').val(val);
    }
});

http://jsfiddle.net/wzsuH/1/

答案 1 :(得分:0)

使用sortable的停止事件检查更改.. toArray以获取<li>列表位置的数组...并将其与,连接并附加到输入

在这里你去..

<强> HTML

<ul id="sort">
  <li id="1">1</li>
  <li id="2">2</li>
  <li id="3">3</li>
  <li id="4">4</li>
  <li id="5">5</li>
</ul>

<强> jquery的

 $('#sort').sortable({
  stop: function( event, ui ) {
   var sortedVal=$(this).sortable( "toArray" );
   var inputVal=sortedVal.join(',');
    $('#inputid').val(inputVal);
  }
});

working fiddle here

答案 2 :(得分:0)

$( "#sort li" ).each(function(){
   $("#idOfYourTextField").val( $("#idOfYourTextField").val()+ $(this).text() );
});

http://jsfiddle.net/yRRLJ/1/