下拉列表选择应自动填充文本框? MVC 4

时间:2014-03-26 05:21:08

标签: jquery asp.net-mvc asp.net-mvc-4

我正在尝试使用jquery在下拉列表选择时获取数据。 jquery方法正在触发并且对控制器的相应方法调用返回JSON也在做它的工作,即返回一些客户数据列表但我不知道如何绑定到文本框。

最初我在级联下拉列表中工作:

我的代码如下:country / state

视图:

 @Html.DropDownList("state",ViewBag.stateid as SelectList,"select a state",new {id="state"}) 
 @Html.Label("District")
<select id="district"  name="District"></select>

AND RESPECTIVE JSON在控制器中返回:

 public JsonResult DistrictList(string id)
        {
            int identity = Convert.ToInt32(id);
            dbforentityEntities1 db = new dbforentityEntities1();
            var district = db.districts.Where(m => m.stateid == identity);
            return Json(new SelectList(district.ToList(), "districtid", "districtname"), JsonRequestBehavior.AllowGet);
        }

但现在我有一个不同的场景,比如我想显示我从Controller进入视图的列表,数据应该填写我创建的文本框

我的代码到现在为止:

查看部分

   <script type="text/jscript">
        $(function ()
        {
            $('#GETEDIT').click(function ()
            {
               $.getJSON('/Home/FetchData/'+$('GETEDIT').val(),function(data)
                    {
                    $.each(data, function (i, **?????** )

//next here i need to iterate to the data and fill it in respective textboxes 
                });
$('#district').html(**????**);
            });
        });
    });
</script>

???? :在上面的代码意味着* 我不知道该保留什么,即我有多个文本框*

任何想法感谢您的时间

此致

3 个答案:

答案 0 :(得分:1)

试试这个,

 for (var i = 0; i < listItems.length; i++) {
  var elements = "<input type='text' id='txt" + listItems[i].districtid+ "'class='required' name='text_"+listItems[i].districtname+"'/><br/></br>";
   $("#yourSelect").append(elements);
   }

 $.each(data, function (i, district) {
  var elements = "<input type='text' id='txt" + district[i].districtid+ "'class='required' name='text_"+district[i].districtname+"'/><br/></br>";
  $("#yourSelect").append(elements);
});

查看

<div id="yourSelect"></div>

这是按钮点击时绑定动态文本框的静态演示,供您参考:http://jsfiddle.net/n7Nr2/1/

答案 1 :(得分:0)

尝试追加:

$.each(data, function (i, district) {
    $('#yourSelect').append($('<option>', { 
        value: district.value,
        text : district.text 
    }));
});

答案 2 :(得分:0)

如果我理解正确,这就是你需要的。

假设预先创建的文本框

<input type="text" id="tb1" />
<input type="text" id="tb2" />

返回JSon格式作为示例

[{"Tb1":123,"Tb2":456,"Tb3":678}]

使用$ .each()

读取json结果
   $.getJSON('/Home/FetchData/'+$('GETEDIT').val(), function(data) {
        $.each(data, function(index) {
            $("#tb1").val(data[index].Tb1);
            $("#tb2").val(data[index].Tb2);
        });
    });