时间戳

首页 > 解决方案 > 谁能告诉我，如何使用 Java 脚本代码将下面的 html 下拉值保存到表中

javascript - 谁能告诉我，如何使用 Java 脚本代码将下面的 html 下拉值保存到表中

问题描述

我使用 Spring Boot 创建了带有文本字段、单选按钮、复选框和下拉列表的 html 表单。在我以 html 表单输入所有值之后，当我单击提交按钮时，所有值都保存到表中，但只有下拉值没有保存到表中，我使用 html 中的一些 JavaScript 代码创建了下拉列表。谁能给我一个解决这个问题的方法？

  1. HTML.Form（这是我的 html 表单）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="ISO-8859-1">
  <title>Employee Management System</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>

  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand" href="#">Employee Management System</a>

    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
          </button>

    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" th:href="@{/employees}">Employee Management</a>
        </li>
      </ul>
    </div>
  </nav>

  <br>
  <br>

  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6 container justify-content-center-center card">
        <h1 class="text-center"> Create New Employee </h1>
        <div class="card-body">
          <form th:action="@{/employees}" th:object="${employee}" method="POST">
            <div class="form-group">
              <label> Employee First Name </label>
              <input type="text" name="firstName" th:field="*{firstName}" class="form-control" placeholder="Enter Employee First Name" />
            </div>

            <div class="form-group">
              <label> Employee Last Name </label>
              <input type="text" name="LastName" th:field="*{LastName}" class="form-control" placeholder="Enter Employee Last Name" />
            </div>

            <div class="form-group">
              <label> Employee Email </label>
              <input type="text" name="email" th:field="*{email}" class="form-control" placeholder="Enter Employee Email" />
            </div>

            <div class="form-group">
              <label> Employee Skill </label> <br>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

              <input type="checkbox" th:field="*{skill}" class="selectOne" name="skill" value="Java" />Java <br>
              <input type="checkbox" th:field="*{skill}" class="selectOne" name="skill" value="Python" />Python <br>
              <input type="checkbox" th:field="*{skill}" class="selectOne" name="skill" value=".Net" />.Net <br>
              <input type="checkbox" th:field="*{skill}" class="selectOne" name="skill" value="Kotlin" />Kotlin <br>
              <input type="checkbox" th:field="*{skill}" class="selectOne" name="skill" value="C" />C <br>
              <input type="checkbox" th:field="*{skill}" class="selectOne" name="skill" value="Ruby" />Ruby <br>
              <script type="text/javascript">
                $('.selectOne').on('change', function() {
                  $('.selectOne').not(this).prop('checked', false);
                });
              </script>

            </div>

            <div class="form-group">
              <label>  Employee Gender </label>
              <input type="radio" th:field="*{gender}" name="gender" value="Male" />Male
              <input type="radio" th:field="*{gender}" name="gender" value="Female" />Female
            </div>



            <div class="form-group">
              <label>  Employee Married? </label>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

              <input type="checkbox" th:field="*{marriage}" class="selectOnly" name="marriage" value="Married" />Married
              <input type="checkbox" th:field="*{marriage}" class="selectOnly" name="marriage" value="Un-Married" />Un-Married
              <script type="text/javascript">
                $('.selectOnly').on('change', function() {
                  $('.selectOnly').not(this).prop('checked', false);
                });
              </script>
            </div>


            <div class="form-group">
              <label>  Employee Birthday </label>
              <input type="date" th:field="*{birthday}" name="birthday" />
            </div>


            <div class="form-group">
              <label>  Employee Works at </label>
              <select class="form-control" name="select1" id="select1">
                <option>--SELECT COMAPNY--</option>
                <option th:field="*{workat}" value="1">NIC</option>
                <option th:field="*{workat}" value="2">Wipro</option>
              </select>
            </div>

            <div class="form-group">
              <select class="form-control" name="select2" , id="select2">
                <option>--SELECT DEPARTMENT--</option>
                <option th:field="*{workat}" value="1">Dep-01</option>
                <option th:field="*{workat}" value="1">Dep-02</option>
                <option th:field="*{workat}" value="1">Dep-03</option>
                <option th:field="*{workat}" value="2">Dep-04</option>
                <option th:field="*{workat}" value="2">Dep-05</option>
              </select>
            </div>

            <script type="text/javascript">
              var $select1 = $('#select1'),
                $select2 = $('#select2'),
                $options = $select2.find('option');

              $select1.on('change', function() {
                $select2.html($options.filter('[value="' + this.value + '"]'));
              }).trigger('change');
            </script>

            <div class="box-footer">
              <button type="submit" class="btn btn-primary">
                                        Submit
                                    </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

  1. 表格.图像

    在此处输入图像描述

标签： javascriptjavahtmlspring-boot

解决方案

在我像这样更改我的代码之后

                <div class = "container">
                    <div class = "form-group">
                        <label for="">  Employee Works at </label>
                        <select class = "form-control"  name="workat" id="select1" onchange="populate(this.id,'select2')">
                        <option value="">--SELECT COMAPNY--</option>
                        <option th:field = "*{workat}" value="NIC-Hyderabad">NIC-Hyderabad</option>
                        <option th:field = "*{workat}" value="NIC-Bangalore">NIC-Bangalore</option>
                        </select>
                        <span th:if="${#fields.hasErrors('workat')}" th:errors="*{workat}">Work at error</span>
                    </div>
                    
                    <div class = "form-group">
                        <label for="">department</label>
                        <select class = "form-control" name="workat" id="select2"></select>
                    </div>
                </div>
                
                <script type="text/javascript">
                
                    function populate(s1,s2)
                    {
                        var s1 = document.getElementById(s1);
                        var s2 = document.getElementById(s2);
                        
                        s2.innerHTML = "";
                        
                        if(s1.value == "NIC-Hyderabad")
                            {
                                var optionArray = ['dep-01|Dep-01','dep-02|Dep-02','dep-03|Dep-03',
                                    'dep-04|Dep-04'];
                            }
                        else if(s1.value == "NIC-Bangalore")
                            {
                            var optionArray = ['dep-01|Dep-01','dep-02|Dep-02','dep-03|Dep-03'];
                            }
                        for(var option in optionArray)
                            {
                                var pair = optionArray[option].split("|");
                                var newoption = document.createElement("option");
                                
                                newoption.value = pair[0];
                                newoption.innerHTML=pair[1];
                                s2.options.add(newoption);
                            }
                        
                    }
                
                </script>

我的问题解决了..谢谢。

推荐阅读