根据下拉值动态填充两个字段

Question

我有一个来自后端的数据库服务器名称推荐列表，一旦用户选择服务器，该驱动程序的“driverName”和“connectionURL”应该自动填充。 我知道可以使用 javascript 来完成它，但我是这门语言的新手。 有人可以帮助我吗？

                        <div class="form-group">
                            <form:label path="databaseServer">Database Server:</form:label>
                            <form:select path="databaseServer" class="form-control">
                                <form:option value="None" label="Please Select a Database Server"/>
                                <form:options items="${command.databaseServerMap}" />
                            </form:select>

                        </div>
                        <div class="form-group">
                            <form:label path="driverName">Driver Name:</form:label>
                            <form:input path="driverName" class="form-control"  readonly="true"/>

                        </div>
                        <div class="form-group">
                            <form:label path="connectionURL">connection URL:</form:label>
                            <form:input path="connectionURL" class="form-control" readonly="true"/>
                        </div>

这些是我在后端使用的地图。

  public Map<String, String> getDatabaseServerMap() {
        Map<String, String> driverList = new LinkedHashMap<>();
        driverList.put("MySQL", "MySQL");
        driverList.put("Postgres", "Postgres");
        return driverList;
    }


  [1]: https://i.stack.imgur.com/HKUWd.png

Answer 1

这个 javaScript 代码是有效的。

<script>
        $(function () {
            $('.selectDatabase').change(function(){
       //         console.log( $(this).val() );
                const driverName=$('.driverName');
                const  connectionURL  = $('.connectionURL');

                if($(this).val()==='MySQL'){
                    driverName.val('com.microsoft.sqlserver.jdbc.SQLServerDriver');
                    connectionURL.val('jdbc:sqlserver://localhost:1433;databaseName=database');
                    driverName.attr('readonly',true);
                    connectionURL.attr('readonly',true);

                }else if($(this).val()==='Other'){
                    driverName.val('');
                    connectionURL.val('');
                    driverName.attr('readonly',false);
                    connectionURL.attr('readonly',false);

                }else{
                    driverName.val('');
                    connectionURL.val('');
                    driverName.attr('readonly',true);
                    connectionURL.attr('readonly',true);
                }

            });

        });


    </script>

<div class="form-group">
                            <form:label path="databaseServer">Database Server:</form:label>
                            <form:select path="databaseServer" class="form-control selectDatabase">
                                <form:option value="None" label="Please Select a Database Server"/>
                                <form:options items="${command.databaseServerMap}" />
                            </form:select>

                        </div>
                        <div class="form-group">
                            <form:label path="driverName">Driver Name:</form:label>
                            <form:input path="driverName" class="form-control driverName"  readonly="true"/>
                        </div>