Question

<!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>

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

有人可以告诉我如何在html中实现此功能吗？

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

Answer 1

改为执行此操作

<?php  common::user_access_only("admin");
    if(isset($_POST['submit']))
    {
        form_validation::add_validation('username', 'required', 'Registration Name');
         form_validation::add_validation('username', 'no_space', 'Registration Name');
         form_validation::add_validation('mobile', 'required', 'mobile');
        form_validation::add_validation('email', 'required', 'Registration email');
        form_validation::add_validation('email', 'email', 'Registration email not valid');
        form_validation::add_validation('password', 'required', 'Registration Passowrd');
        form_validation::add_validation('password', 'no_space', 'Registration Passowrd');
        if(form_validation::validate_fields())
        {
            $username=common::get_control_value("username");
            $mobile = common::get_control_value("mobile");
            $password=common::get_control_value("password");
            $email=common::get_control_value("email");
            $active = common::get_control_value("status"); 

            $q = new Query();
            $q->insert_into("register",array("username"=>$username,"mobile"=>$mobile,"password"=>md5($password),"temp_password"=>$password,"email"=>$email,"status"=>$active))
            ->show()
            ->run();
            common::set_message(3);
            common::redirect_to(common::get_component_link(array("appuser","list")));

        }
    }
?>

所选值和保险公司数组将传递给函数<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()

希望这对您有用。

Answer 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>

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

2 个答案: