如何制作所选元素并附加选项？

作者: 没身份别烦我
发布时间: 2024-12-27 04:17:41 (5天前)
转自：

4 条回复

0#
回复此人
丫头 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是我的发电机版本。 :) </p> <pre> <code> $(object).each(function(i,v) { var label = $("<label />", { html: v.label, 'for': v.name }); var element; switch(v.type) { case "select": element = $("<select />", { id: v.id, name: v.name }); $(v.options).each(function(x,y) { var option = $("<option />", { value : y.value, html : y.text }); element.append(option) }); break; } $("body").append(label, element); }); </code> </pre> <P> <EM> <a href="http://jsfiddle.net/Starx/eMnx5/1/"" rel="nofollow"> [看到它在行动] </A> </EM> </p> <UL> <LI> 这可以处理多组数据 </LI> <LI> 作为可伸缩性，它可以扩展到不仅仅包括选择类型。 </LI> </UL> </DIV>

编辑
1#
回复此人
真不错 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> $(document).ready(function () { var jsonObject = { "id": "countries", "label": "Country", "name": "countries", "type": "select", "options": [ { "value": "", "text": "Select Country" }, { "value": "in", "text": "India", "selected": "true" }, { "value": "us", "text": "United Stated" }, { "value": "uk", "text": "United Kingdom" }, { "value": "cn", "text": "Canada" } ] }; var selectedvalue = ''; $("body").append($("<label />", { html: jsonObject.label, 'for': jsonObject.name }), $("<select id='ddlSelect' />", { id: jsonObject.id, name: jsonObject.name }).html($.map(jsonObject.options, function (entity, i) { if (entity.selected == "true") selectedvalue = entity.value; return '<option value="' + entity.value + '">' + entity.text + '</option>'; //return $("<option />", { value: entity.value, text: entity.text }); }).join(''))); $('#ddlSelect').val(selectedvalue).trigger('change'); }); </code> </pre> <P> 对于演示，请看到此链接： <a href="http://jsfiddle.net/nanoquantumtech/vUwVq/" rel="nofollow"> http://jsfiddle.net/nanoquantumtech/vUwVq/ </A> </p> </DIV>

编辑
2#
回复此人
电动少女 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 试试这个 </p> <pre> <code> function generateSelector(obj) { var selector = $('<div></div>'); var label = $('<label for="' + obj.id + '">' + obj.label + '</label>'); var selectElem = $('<select id="' + obj.id + '" name="' + obj.name + '"></select>'); for (var i = 0; i < obj.options.length; i++) { var option = $('<option value="' + obj.options[i].value + '">' + obj.options[i].text + '</option>'); if (obj.options[i].selected) option.attr('selected', 'selected'); option.appendTo(selectElem); } label.appendTo(selector); selectElem.appendTo(selector); return selector; </code> </pre> <P> } </p> </DIV>

编辑

登录后才能参与评论