Question

由于我网站中的下拉选项，我希望获得动态结果。我有以下汽车的例子。购买沃尔沃汽车应该导致汽车成本例如1000。我想拥有这个实时，具体取决于所做的下拉选项。

你可以帮我这个吗？我认为它必须是一些javascript的kinde，但我无法弄清楚如何做到这一点。

<!DOCTYPE html>
<html>
<body>
<style>
    #choice {
        float: right;
    }
</style>
<form action="action_page.php">
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
    <br><br>
    <input type="submit">
</form>

<div id="choice">
    Car costs are: Result of choice
</div>
</body>
</html>

谢谢！

Answer 1

这应该可以正常工作。

<html ng-app>
    <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
      <script>
            function Car($scope) {
                $scope.car = {

                    'Volvo': {
                     'Volvo-2000': ['Volvo-2000'],
                        'Volvo-3000': ['Volvo-3000']
                    },
                    'Saab': {
                     'Saab-2000': ['Saab-2000'],
                        'Saab-3000': ['Saab-3000']

                    },
                    'Fiat': {
                     'Fiat-2000': ['Fiat-2000'],
                        'Fiat-3000': ['Fiat-3000']
                    },
                    'Audi': {
                        'AUDI-2000': ['AUDI-2000'],
                        'AUDI-3000': ['AUDI-3000']
                    }
                };
            }
        </script>
    </head>
    <body>

        <div ng-controller="Car">
            <div>
                Car:
                <select id="car" ng-model="price" ng-options="car for (car, price) in car">
                    <option value=''>Select</option>
                </select>
            </div>
            <div>
                Price: <select id="price" ng-disabled="!car" ng-model="price" ng-options="car for (car,price) in price"><option value=''>Select</option></select>
            </div>
        </div>

    </body>
</html>

Fiddle

修改

对于这种误解感到抱歉，这应该没问题。

<!DOCTYPE html> <html> <body> <style> #choice{ float:right;} </style> <script> var changeInput = function (val){ var input = document.getElementById("choice"); input.value = val; } </script> <form action="action_page.php"> <select name="cars" onchange = 'changeInput(this.value);'> <option value="volvo 121">Volvo</option> <option value="saab 121">Saab</option> <option value="fiat 121">Fiat</option> <option value="audi 121">Audi</option> </select> <br><br> <input type="submit"> </form> <div> Car cost: <form> <input type = "text" id = "choice" value = "" style="float: left;"> </form> </div> </body> </html>

2nd Fiddle

下拉选项的动态概述

1 个答案: