Question

在我的网站上，我使用谷歌地图来计算两个地方之间的距离。目前该脚本在按钮点击时运行。我想让它在下拉选择上运行。在下拉列表中，选定的值将被复制到secondNumber文本框中。我当前的代码是这样的。

最后我想将textbox1与textbox2相乘但在此之前需要将一些值放在textbox1＆amp;只有当GetRoute函数调用下拉选择时才有可能。

<asp:DropDownList ID="selectVehicle" runat="server" CssClass="inners" AutoPostBack="true">
                            <asp:listitem>-- Select Vehicle --</asp:listitem>
                            <asp:listitem Value="20">Tata Ace</asp:listitem>
                            <asp:listitem Value="35">Tata 407</asp:listitem>
                        </asp:DropDownList>

<asp:TextBox ID="firstNumber" runat="server" style="display:none"></asp:TextBox><br /><br />
<asp:TextBox ID="secondNumber" runat="server" style="display:none"></asp:TextBox>

<asp:Button ID="btnShow" runat="server" Text="Click to Proceed" CssClass="book" OnClientClick="GetRoute();" />

地图脚本

<script type="text/javascript">
        var source, destination;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        google.maps.event.addDomListener(window, 'load', function () {
            new google.maps.places.SearchBox(document.getElementById('txtSource'));
            new google.maps.places.SearchBox(document.getElementById('txtDestination'));
            directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
        });

        function GetRoute() {
            debugger;
            var mumbai = new google.maps.LatLng(18.9750, 72.8258);
            var mapOptions = {
                zoom: 7,
                center: mumbai
            };
            map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('dvPanel'));

            //*********DIRECTIONS AND ROUTE**********************//
            source = document.getElementById("txtSource").value;
            destination = document.getElementById("txtDestination").value;

            var request = {
                origin: source,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });

            //*********DISTANCE AND DURATION**********************//
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins: [source],
                destinations: [destination],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, function (response, status) {
                if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                    var distance = response.rows[0].elements[0].distance.text;
                    var duration = response.rows[0].elements[0].duration.text;
                    var dvDistance = document.getElementById("dvDistance");
                    var dvDuration = document.getElementById("dvDuration")
                    dvDistance.innerHTML = "";
                    dvDistance.innerHTML = distance ;
                    dvDuration.innerHTML = duration;

                } else {
                    alert("Unable to find the distance via road.");
                }
            });
        }
    </script>

这里一切正常，我只想在下拉选择中调用GetRoute（）函数而不是单击按钮...

Answer 1

您只需将onchange属性添加到下拉列表控件中，如下所示：

<asp:DropDownList ID="selectVehicle" runat="server" CssClass="inners" AutoPostBack="true" onchange="GetRoute();">
                            <asp:listitem>-- Select Vehicle --</asp:listitem>
                            <asp:listitem Value="20">Tata Ace</asp:listitem>
                            <asp:listitem Value="35">Tata 407</asp:listitem>
                        </asp:DropDownList>

在vb.net中的dropdown selction上调用javascript函数

1 个答案: