根据下拉列表中选择的值自动填充文本框答案

【问题标题】：autofill the textboxes based on value selected in the dropdown根据下拉列表中选择的值自动填充文本框
【发布时间】：2019-04-28 02:04:48
【问题描述】：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Policy Creations</title>
    <script type="text/javascript">
        /* function autofillValues(country,state, city, pincode,branch,addrLine1,addrLine2){ */        
           function autofillValues(country){

        console.log(country);
           document.getElementById('country').value = country;
           alert(document.getElementById('country').value);
           /* document.getElementById('state').value = state;
           document.getElementById('city').value = city;
           document.getElementById('pincode').value = pincode;
           document.getElementById('branch').value = branch;
           document.getElementById('addrLine1').value = addrLine1;
           document.getElementById('addrLine2').value = addrLine2;  */
       }

    </script>
</head>
<body>
<h1># Policy Creation</h1>
<br>
<h2>Insurer Details</h2>
<form name="newPolicy" th:object="${insurerList}">
Insurer Name<sup>*</sup>
    <!-- onchange = "autofillValues()" -->

   <select  onchange = "autofillValues('${insurerList')" >
     <option  value="">Select</option>
    <option th:each = "insurer : ${insurerList}"
            th:value = "${insurer.name}"
            th:utext="${insurer.name}" />     
    </select>   



Country<sup>*</sup> <input type="text" name="country" id="country"/>
State<sup>*</sup> <input type="text" name="state" id="state" value=""> <br><br>
City<sup>*</sup> <input type="text" name="city" id="city" value="">
Pincode<sup>*</sup> <input type="text" name="pincode" id="pincode" value="">
Branch<sup>*</sup> <input type="text" name="branch" id="branch" value="">
Address Line 1<sup>*</sup> <input type="text" name="addrLine1" id="addrLine1" value="">
Address Line 2 <sup>*</sup> <input type="text" name="addrLine2" id="addrLine2" value="">
</form>

</body>

</html>

我在项目中有一个要求，将下拉菜单显示给用户。下拉列表中显示的数据来自数据库并设置在一个对象中。然后迭代此对象以显示下拉列表.. 在我的情况下，该对象是一个数组列表（insurerList）.. 在下拉列表中显示数据后，我想自动填充其值存在于 insurancelist 对象中的其他文本框...

谁能告诉我如何在 html 中实现这个功能？

iam 使用 spring mvc....insurerList 的值在 spring mvc 的模型属性中设置... 也欢迎任何其他解决此问题的方法...

【问题讨论】：

标签： javascript html spring-mvc thymeleaf

【解决方案1】：

改为这样做

<select onChange = "autofillValues('${insurer}', this.value)">
 <option  value="">Select</option>
 <option th:each = "insurer : ${insurerList}"
        th:value = "${insurer.name}"
        th:utext="${insurer.name}"/>     
</select>

选定的值和保险公司数组将被传递给函数autofillValues()。

function autofillValues(insurer, name){
  //get index of the selected name in the array
  var i = insurer.map(function (d) { return d['name']; }).indexOf(name);
  document.getElementById('country').value = insurer[i].country;
  document.getElementById('state').value = insurer[i].state;
  document.getElementById('city').value = insurer[i].city;
  document.getElementById('pincode').value = insurer[i].pincode;
  document.getElementById('branch').value = insurer[i].branch;
  document.getElementById('addrLine1').value = insurer[i].addrLine1;
  document.getElementById('addrLine2').value = insurer[i].addrLine2;
}

希望这对你有用。

【讨论】：

onchange 里面的选项不起作用...服务没有启动..html 无法解析
@tin_tin，我已经编辑了上面的代码。看一次

【解决方案2】：

我认为实现这一点的最佳方法是将提取的数据存储到一个数组中，然后将该数据自动填充到您创建的输入中。

检查此代码；

   // Store the data in an array like the one below
   var values = ['Coder', 'Somalia', 'Puntland', 'Galkayo', '291', '2', 's-999', 'f-991'];		
   function autofillValues(insurer, name){
  document.getElementById('country').value = values[0];
  document.getElementById('state').value = values[1];
  document.getElementById('city').value = values[2];
  document.getElementById('pincode').value = values[3];
  document.getElementById('branch').value = values[4];
  document.getElementById('addrLine1').value = values[5];
  document.getElementById('addrLine2').value = values[6];
  alert('done!');
}

<h1># Policy Creation</h1>
<br>
<h2>Insurer Details</h2>
<form name="newPolicy" th:object="${insurerList}">
Insurer Name<sup>*</sup>
    <!-- onchange = "autofillValues()" -->

   <select  onchange = "autofillValues('${insurerList')" >
     <option  value="">Select</option>
    <option th:each = "insurer : ${insurerList}"
        th:value = "${insurer.name}"
        th:utext="${insurer.name}" >  Click Here </option>       
    </select>   



Country<sup>*</sup> <input type="text" name="country" id="country"/>
State<sup>*</sup> <input type="text" name="state" id="state" value=""> <br><br>
City<sup>*</sup> <input type="text" name="city" id="city" value="">
Pincode<sup>*</sup> <input type="text" name="pincode" id="pincode" value="">
Branch<sup>*</sup> <input type="text" name="branch" id="branch" value="">
Address Line 1<sup>*</sup> <input type="text" name="addrLine1" id="addrLine1" value="">
Address Line 2 <sup>*</sup> <input type="text" name="addrLine2" id="addrLine2" value="">
</form>

【讨论】：

我在想类似的事情..但是要填充的值来自已定义的 insurancelist 对象..insurerlist 是对象列表..要填充的值来自对象..你可以建议一个填充数组的方案...我去办公室时会尝试一些组合。
@tin_tin 您可以在从服务器获取insurerlist 对象时将其转换为文本。然后，您可以使用正则表达式将该文本转换为数组。之后就可以执行上面的代码了。