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>

Please add more code, including what you have tried so far. Your edit still does not populate the dropdown due to not having the complete function included. — Nathan Fries, Aug 07 '19 at 06:34
Possible duplicate of [Get selected value in dropdown list using JavaScript](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Nathan Fries, Aug 07 '19 at 06:44

score -1 · Answer 1 · answered Aug 07 '19 at 06:41

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" />

score -1 · Answer 2 · answered Aug 07 '19 at 06:49

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

2 Answers2