我想用jQuery填充带有下拉选择的文本框 [英] I want to populate text box with dropdown selection with jquery

查看:55
本文介绍了我想用jQuery填充带有下拉选择的文本框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个表compte

  • id
  • 登录
  • 邮件
  • 移动

我要显示带有下拉列表的登录名,当用户选择登录时,移动电话和电子邮件将根据其选择自动显示在2个文本框中.

I want to display the login with a dropdown list and when the user selects login the mobile and the email should be displayed automatically in 2 text boxes based on his selection.

有人可以帮忙还是给我一个例子?

Can someone help or give me an example?

推荐答案

我确定您不希望我们从头开始编写代码,而是在寻找一些实现此目标的步骤

I am sure you are not expecting us to write the code from scratch , but looking for some steps how to achieve this

1)从您的数据访问层(表/缓存)获取所有登录列值,并显示在一个DropDown中.

1) Get All Login Column values from your Data Access layer (table/Cache) and Show that in a DropDown.

2)用JavaScript收听Dropdown的change事件.发生更改事件时,获取选定Item的值,并调用Ajax调用另一个Action方法,并将Dropdown的选定值作为此方法的参数传递.Action方法应为此从表中获取相应的记录.虚拟登录并以JSON格式将结果返回给客户端.

2) Listen to the change event of the Dropdown , in javascript. When the change event occurs, get the selected Item's value and Make an Ajax call to another Action method and pass the selected value of the Dropdown as a parameter of this method .The Action method should get the corresponding record from your table for this purticular login and return the result in JSON format to the client.

3),在您的ajax方法的回调中,阅读JSON并设置文本"框的值.

3) in the call back of your ajax method, Read the JSON and Set the value of the Text boxes.

$(function(){
    $("#LoginDropDown").change(function(){
      var val=$(this).val();

       $.getJSON("@Url.Action("GetDetails","Home")/"+val,function(data){
            if(data.Status=="Success")
            {
              $("#txtMail").val(data.Mail);
              $("#txtMobile").val(data.Mobile);
            }    
        });    
    });      
});

假设您的Action方法以这种格式返回JSON.

Assuming your Action method Returns a JSON in this format.

{
    "Status": "Success",
    "Mail": "you@outlook.com",
    "Mobile": "242342344"
}

这篇关于我想用jQuery填充带有下拉选择的文本框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆