如何創建動態控件並將其數據放入對象中？

我創建了一個div和一個按鈕。當點擊按鈕時，會在div中插入一組元素（包括1個選擇框和2個文本輸入）。用戶可以添加儘可能多的組，當他們完成鍵入所添加的所有組的數據時，他可以點擊保存按鈕，這會將來自每個組的值逐個放入JSON對象數組中。但是我被困在如何從每個組獲得價值的部分，所以請幫助，謝謝。。如何創建動態控件並將其數據放入對象中？

爲div和添加組按鈕功能的代碼 - AddExtra（）如下：

<div id="roomextra"> 
</div> 

function AddExtra() { 
$('#roomextra').append('<div class=extra>' + 
'<select id="isInset">' + 
'<option value="Inset">Inset</option>' + 
'<option value="Offset">OffSet</option>' + 
'</select>' + 
'Length(m): <input type="text" id="insetLength">' + 
'Width(m): <input type="text" id="insetWidth">' + 
'Height(m): <input type="text" id="insetHeight">' + 
'</div>'); 
} 

function GetInsetOffSetArray (callBack) { 

    var roomIFSDetail = [{ 
    "IsInset": '' , 
    "Length": '' , 
    "Width": '' , 
    "Height": '' 
    }]; 

//should get all the value from each group element and write into the array. 

callBack(roomIFSDetail); 

}

來源

2013-05-07 Wei Zhang

這應該只是做它。但是，如果您要動態創建這些組，則需要使用id之外的其他內容。您可能想要爲其添加一個類或一個data-*屬性。在這種情況下，我使用了一個類。將這些類添加到您的控件中，以便我們知道哪個是哪個。

var roomIFSDetail = []; 
var obj; 

// grab all of the divs (groups) and look for my controls in them 
$(.extra).each(function(){ 
    // create object out of select and inputs values 
    // the 'this' in the selector is the context. It basically says to use the object 
    // from the .each loop to search in. 
    obj = { 
      IsInset: $('.isInset', this).find(':selected').val() , 
      Length: $('.insetLength', this).val() , 
      Width: $('.insetWidth', this).val() , 
      Height: $('.insetHeight', this).val() 
     }; 
    // add object to array of objects 
    roomIFSDetail.push(obj); 
});

來源

2013-05-07 15:17:55 Yatrix

完美！有用！非常感謝！ – 2013-05-07 15:41:32

不客氣。 – Yatrix 2013-05-07 15:45:23

-1

使用$（「額外」）每個（函數（）{

//從這裏的ctrls中取出信息

}）;

這將遍歷所有額外的div，並允許您將所有值添加到數組。

來源

2013-05-07 15:04:13

您最好不要使用id屬性來標識select和input，name屬性。例如

$('#roomextra').append('<div class=extra>' + 
    '<select name="isInset">' + 
    '<option value="Inset">Inset</option>' + 
    '<option value="Offset">OffSet</option>' + 
    '</select>' + 
    'Length(m): <input type="text" name="insetLength">' + 
    'Width(m): <input type="text" name="insetWidth">' + 
    'Height(m): <input type="text" name="insetHeight">' + 
    '</div>'); 
}

然後，USR的foreach迭代

$(".extra").each(function() { 
    var $this = $(this); 
    var isInset = $this.find("select[name='isInset']").val(); 
    var insetLength = $this.find("input[name='insetLength']").val(); 
    // ... and go on 
});

來源

2013-05-07 15:18:30 shuaqiu

也是這樣。我知道使用id不好，但是那個時候我不知道該用哪個。但是現在我澄清一下，謝謝。 – 2013-05-07 15:43:11

一個常見的問題。幾件事：

您不能在要重複的部分使用ID，因爲DOM中的ID應該是唯一的。
我更喜歡在使用標記的地方編寫大量代碼，並在代碼中對其進行修改而不是在代碼中進行生成。

http://jsfiddle.net/b9chris/PZ8sf/

HTML：

<div id=form> 
... non-repeating elements go here... 

<div id=roomextra> 
<div class=extra> 

<select name=isInset> 
<option>Inset</option> 
<option>OffSet</option> 
</select> 
Length(m): <input id=insetLength> 
Width(m): <input id=insetWidth> 
Height(m): <input id=insetHeight> 

</div> 
</div> 

</div>

JS：

(function() { 
// Get the template 
var container = $('#roomextra'); 
var T = $('div.extra', container); 

$('#addGroup').click(function() { 
    container.append(T.clone()); 
}); 

$('#submit').click(function() { 
    var d = {}; 
    // Fill d with data from the rest of the form 

    d.groups = $.map($('div.extra', container), function(tag) { 
     var g = {}; 
     $.each(['isInset', 'insetLength', 'insetWidth', 'insetHeight'], function(i, name) { 
      g[name] = $('[name=' + name + ']', tag).val(); 
     }); 

     return g; 
    }); 

    // Inspect the data to ensure it's what you wanted 
    debugger; 
}); 

})();

這樣不斷重複的寫在普通的舊的HTML，而不是一堆JS字符串的模板附加對彼此。使用名稱屬性而不是ids保持這些元素通常工作的方式，而不違反任何DOM約束。

您可能注意到我沒有引用我的屬性，將值屬性從選項中取出，並從輸入中取出類型屬性，以使代碼保持有點DRYer。 HTML5規範不需要引用屬性，如果不明確指定值屬性，則選項標記的值就是文本的任何值，並且如果沒有指定任何值，則輸入標記默認爲type = text，所有這些都將合計爲更快的閱讀和更苗條的HTML。

來源

2013-05-07 16:42:40

如何創建動態控件並將其數據放入對象中？

回答

相關問題