將項目添加到列表

Question

將項目添加到有序列表的最佳方式是什麼？

我希望當一個項目更改值時，該控件的值被放置在一個列表中。

示例

-radiobutton value = radiobuttonvalue;
-checkbox value = checkboxvalue;
-textbox value = textboxvalue;

點擊：首先在複選框比單選按鈕和最後一個文本框。

輸出：

<ul> 
<li>radiobuttonvalue</li> 
<li>checkboxvalue</li> 
<li>textboxvalue</li> 
</ul> 

，所以我認爲它在至極的控制內容doen't首先點擊，輸出總是以相同的順序。

Answer 1

所以，你要輸出的字段的值在表單中的字段的順序？如果是這樣，這可能是你在找什麼：

$(function() { 
    var fieldValues = []; 

    $('.field').change(function() { 
    // get the index of the field 
    var fieldIndex = $(this).index(); 

    // store the value of the field in the array using it's index 
    fieldValues[fieldIndex] = $(this).val(); 

    // our output list 
    var $list = $("#output"); 

    // clear the list 
    $list.html(""); 

    // loop through our values and add them to the list 
    for(value in fieldValues) { 
     $list.append("<li>"+fieldValues[value]+"</li>");   
    } 
    }); 
}); 

HTML：

<input class="field" /> 
<input class="field" /> 
<input class="field" /> 
<input class="field" /> 

<ul id="output"></ul> 

Answer 2

使用jQuery：

$('input').change(function(){ 
    var value = this.value; 
    $('#output').prepend($('<p>', {text:value})); 
}) 

HTML：

<input type='...'/> 
<input type='...'/> 
<input type='...'/> 
<input type='...'/> 
<div id='output'></div> 

---

更新小提琴使用列表。

這是新的js代碼：

$('input').change(function(){ 
    var value = this.value; 
    $('#output').append($('<li>', {text:value})); 
}); 

小提琴：http://jsfiddle.net/maniator/Ee7gY/