繁体   English   中英

在为一个输入字段选择一个值后,自动将相应的数据填充到不同的输入字段中

[英]auto populate corresponding data into different input fields after selecting a value to one input field javascript

我有一个水平形式,它是使用javascript动态生成的,每个输入字段都有一个jquery自动完成功能,可以使用$ .get方法填充数据库中的数据。

当我选择第一个输入字段的数据时,我想用相应的值填充第二个输入字段的数据。 在这里,行被克隆,然后自动完成功能也与行一起被克隆。

在下图中,如果我选择类别集,则希望自动填充值字段:

在此处输入图片说明

我能够实现自动完成,但无法实现将数据填充到第二个输入字段。

function loadcategorysetvalue(table,tabdata){
    var catsetlov=[];
    var catvalov=[];
 $.get("URL",function(response){
    catsetlov=response;
    }).done(function(){
        var row =null;
        var newId=1;
        for(var i=0;i<catsetlov.length;i++){
        newId++;`enter code here`
        row=insertrow(table(table,tabdata,"categories");
        cell=row.cells[0];
        cell.children[0].value=catsetlov[i];
        setcatvalue(catsetlov[i]);
        addbtn(row);
        var id = cell.children[0].getAttribute("id");
        var newId=(id+"_"+newId);
        cell.children[0].setAttribute("id",newId);
        $('#'+newId).autocomplete({
            source:catsetlov,
            minLength:0
         }).focus(function(){
           $.get("url",function(response){
           catsetlov=response;
        });
          $(this).autocomplete("search","");
       });
      }
    });
   }

您可以在自动完成字段的“选择/更改”事件上设置其他输入字段,请参见以下示例:

 var mySource = [{"label":"Value one","id":"1"},{"label":"Value two","id":"2"},{"label":"Value three","id":"3"}]; $("#txtAutocomplete").autocomplete({ source: mySource, select: function(event, ui){ if(ui.item){ $("#hiddenField").val(ui.item.id); return ui.item.label; } else{ $("#hiddenField").val(''); } }, change: function(event, ui){ if(ui.item){ $("#hiddenField").val(ui.item.id); } else{ $("#hiddenField").val(''); } } }); 
 <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <p> Start type something like "Val.." </p> <input type="text" id="txtAutocomplete"> <input type="text" id="hiddenField" disabled="disabled"> 

希望对您有帮助,再见。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM