根据通过jquery / ajax webservice引入的下拉信息进行选择,填写多个文本框

时间:2015-12-14 15:06:06

标签: c# jquery asp.net ajax

现在,我有两个动态创建的选择框,有多个选项(如果需要可以添加更多选择框,通常用户创建最少5-10个) - 我们可以调用两个框选择1和选择2.这些框是根据JQuery中的填充选择功能填充的。选择2取决于选择1,换句话说,一旦从Select1中选择了一个选项; Select2将填充适当的数据。见下面的功能;

FillSelect($smelterMetalSelect, "GetMetals", {}, "", true, false, "metalId", "name", answer != undefined ? answer.metal_id : "", function () {
                    FillSelect($smelterSelect, "GetSmeltersByMetal", { metalId: answer.metal_id }, "", true, false, "smelterId", "name", answer.smelterId, function () {
                        hideShowDetail($smelterSelect);
                    });
                });

现在,一旦在选择中选择了一个选项 - +2框一个div通过多个输入和单选按钮附加到选择。请参阅下面的代码(因为您可以看到每个追加添加一个输入框或具有相同类的单选按钮);

$smelterDiv.append($smelter);
            var $smelterDetailDiv = $("<div class='smelter-detail-div'></div>");
            var $smelterName = $('<br><span class="smelter-name-span smelter-detail" ><label class="smelter-detail-label">Name: </label><input class="smelter-name ui-widget-content " /></span>');
            $smelterDetailDiv.append($smelterName);
            var $smelterCountry = $('<span class="smelter-country-span smelter-detail" ><label class="smelter-detail-label">Country: </label><input class="smelter-country ui-widget-content " /></span>');
            $smelterDetailDiv.append($smelterCountry);
            var $smelterId = $('<span class="smelter-id-span smelter-detail"><label class="smelter-detail-label">Smelter Identification: </label><input class="smelter-id ui-widget-content" /></span>');
            $smelterDetailDiv.append($smelterId);
            var $smelterIdSource = $('<span class="smelter-id-source-span smelter-detail"><label class="smelter-detail-label">Source of Smelter Identification Number: </label><input class="smelter-id-source ui-widget-content" /></span>');
            $smelterDetailDiv.append($smelterIdSource);
            var $smelterStreet = $('<span class="smelter-street-span smelter-detail" ><label class="smelter-detail-label">Smelter Street: </label><input class="smelter-street ui-widget-content" /></span>');
            $smelterDetailDiv.append($smelterStreet);
            var $smelterCity = $('<span class="smelter-city-span smelter-detail"><label class="smelter-detail-label">Smelter City: </label><input class="smelter-city ui-widget-content"/></span>');
            $smelterDetailDiv.append($smelterCity);
            var $smelterFacilityLocation = $('<span class="smelter-facility-span smelter-detail"><label class="smelter-detail-label">Smelter Facility Location State/Provice: </label><input class="smelter-facility ui-widget-content" /></span>');
            $smelterDetailDiv.append($smelterFacilityLocation);
            var $smelterContactName = $('<span class="smelter-contact-name-span smelter-detail"><label class="smelter-detail-label">Smelter Contact Name: </label><input class="smelter-contact-name ui-widget-content" /></span>');
            $smelterDetailDiv.append($smelterContactName);
            var $smelterContactEmail = $('<span class="smelter-contact-email-span smelter-detail"><label class="smelter-detail-label">Smelter Contact Email: </label><input class="smelter-contact-email ui-widget-content" /></span>');
            $smelterDetailDiv.append($smelterContactEmail);
            var $smelterNextSteps = $('<span class="smelter-next-steps-span smelter-detail"><label class="smelter-detail-label">Proposed Next Steps: </label><input class="smelter-next-steps ui-widget-content" /></span>');
            $smelterDetailDiv.append($smelterNextSteps);
            var $smelterMineName = $('<span class="smelter-mine-name-span smelter-detail"><label class="smelter-detail-label">Name of mine(s) or if recycled or scrap source enter recycled or scrap: </label><input class="smelter-mine-name ui-widget-content" /></span>');
            $smelterDetailDiv.append($smelterMineName);
            var $smelterMineCountry = $('<span class="smelter-mine-county-span smelter-detail"><label class="smelter-detail-label">Location (country) of mine(s) or if recycled or scrap source enter recycled or scrap: </label><input class="smelter-mine-country ui-widget-content" /></span>');
            $smelterDetailDiv.append($smelterMineCountry);
            var $smelterRecycledScrap = $('<span class="smelter-recycled-scrap-span"><label><br>Does 100% of the smeleters feedstock originate from recycled or scrap sources: </label><input type="radio" name="allRecycleScrap" value="Yes" class="smelter-recycled-scrap ui-widget-content" />Yes <input type="radio" name="allRecycleScrap" value="No" class="smelter-recycled-scrap" />No</span>');
            $smelterDetailDiv.append($smelterRecycledScrap);
            var $smelterComments = $('<br><span class="smelter-comments-span">Comments: <textarea class="smelter-comments ui-widget-content"></textarea></span>');
            $smelterDetailDiv.append($smelterComments);

以下是返回数据的片段及其外观;

0: Object
__type: "WebService+Smelter"
name: "Avon Specialty Metals Ltd"
showDetail: "Detail"
smelterCitys: "Gloucester"
smelterCountry: "United Kingdom"
smelterFacilityLocation: "Gloucestershire"
smelterId: 12
smelterSourceId: "CFSI"
standardSmelterName: "Avon Specialty Metals Ltd"

我想要做的是用上面的信息填充输入框。我面临的问题有两个问题,就是我只能这样填充所述行的数量(存储在数据库中),如下所示(参见下面的代码)但是我想显示字符串而不是行号;

 $(".smelter-select").change(function () {
                            var selectedval = $(this).find("option:selected").val(answer.metal_id);
                            //retrieve records based on selectedval
                            //fill inputs and radio buttons
                            $('.smelter-name').val(selectedval);

                        })

最后,当它填充文本框时,它会填充具有该给定类的所有文本框,并且我只想填充与该特定选择框关联的div,因为每个选择框都应填充适当的数据。

欢迎任何帮助。

0 个答案:

没有答案