dynamic item selection of product and price

Question

I'm having a list of items in an array with its prices. The list of items must be displayed in a dropdown . When one is selected, I want its corresponding price to be placed into a text box called price .

JS:

function PopulateDropDownList() {
  var products = [
    { productId: 1, name: "Fanta", price: "4" },
    { productId: 2, name: "Coke", price: "2" },
    { productId: 3, name: "Sprite", price: "8" },
    { productId: 4, name: "Malta Guniness", price: "10" }
  ];
}

HTML:

<body onload="PopulateDropDownList()">
  <hr />
  <select id="productsDropDown">
  </select>

  <input type="text" name="price" value="">
</body>

Answer 1

I think you are trying something like below-posted code.

 function myFunction(e) { document.getElementById("price").value = e.target.value }

 <hr /> <select id="productsDropDown" name="productsDropDown" onchange="myFunction(event)"> <option value="4">productId: 1</option> <option value="2">productId: 2</option> <option value="8">productId: 3</option> <option value="10">productId: 4</option> </select> <input type="text" size="30" name="price" id="price" />

Answer 2

 var demo = angular.module('demo', []); function MyCtrl ($scope) { $scope.myGroups = [ {label:'Admin', value:1}, {label:'Users', value:2}, {label:'Public', value:3} ]; $scope.tellUs = function() { console.log("the selected group is - " + $scope.group); }; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.6/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div ng-app='demo' ng-controller='MyCtrl'> <p>You've just selected {{group}}.</p> <form> <select ng-model="group" ng-options="o.value as o.label for o in myGroups" ng-change="tellUs()"/> </form> </div>

dynamic item selection of product and price

Question

2 answers

solution1
-1 2019-08-07 06:41:37

solution2
-1 2019-08-07 06:49:42

dynamic item selection of product and price

Question

2 answers

solution1 -1 2019-08-07 06:41:37

solution2 -1 2019-08-07 06:49:42

solution1
-1 2019-08-07 06:41:37

solution2
-1 2019-08-07 06:49:42