如何解决下拉框select点击用户在另一个input框中回显其电话号码

这几天做项目遇到一个需求，就是在下拉框中点击司机然后在紧接着的input框中回显该司机的电话号码，虽然问题很小，但也值得记录，直接上我的解决方法。

html页面

                <div class="form-group">
                    <label class="col-sm-3 control-label">司机：</label>
                    <div class="col-sm-8">
                        <select class="form-control" name="personId" id="selectDriver" onchange="backShow()">
                            <option value="null">请选择司机</option>
                            <option  th:each="item,eachInfo:${allName}" th:object="${item}" th:value="*{userId}">
                                <div th:text="*{userName}"></div>
                            </option>
                        </select>
                    </div>
                </div>


            <div class="form-group">    
                <label class="col-sm-3 control-label">手机号：</label>
                <div class="col-sm-8">
                    <input name="phone" class="form-control" type="text" id="phoneNumber">
                </div>
            </div>

js代码

       //选择司机回显其手机号
        function backShow(){
            var sel = document.getElementsByTagName('select')[1];
            var curr = sel.options[sel.options.selectedIndex].value;
            if (curr==="null"){
                $("#phoneNumber").attr("value",'')
            }
            else {
                $.ajax({
                    url: '/system/carInfo/getPhone?userId=' + curr,
                    type: 'get',
                    success: function (res) {
                        $("#phoneNumber").attr("value", res)
                    }
                })
            }
        }

主要利用了select的onchange()事件，然后通过ajax将司机的id传给后端返还其手机号并回显

var sel = document.getElementsByTagName('select')[1];

中括号中的数字代表该下拉框位于该页面第几个下拉框，[1]代表位于第二个下拉框