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

时间:2017-05-02 09:21:13

标签: javascript jquery html

我有水平形式,它是使用javascript动态生成的,每个输入字段都有一个jquery auto complete,它使用$ .get方法从DB填充数据。

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

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

enter image description here

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

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","");
       });
      }
    });
   }

1 个答案:

答案 0 :(得分:0)

你可以设置其他输入字段&#34;选择/更改&#34;自动填充字段的事件,请参见以下示例:

&#13;
&#13;
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('');
    }
  }
});
&#13;
<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">
&#13;
&#13;
&#13;

我希望它可以帮助你,再见。