Drop down list with OnChange event and Displaying Selected option value

Select One option and onChange event will read the data and display the same inside a div.


<div ng-app="my_app" ng-controller="my_ctrl">
<select ng-model="students" ng-options="x.name for x in details" ng-change="onChange()" >
</select>
</div>
<br><br>
<div class='alert alert-primary' role='alert' id=d1>After selection details will appear here</div>
<script>
var app = angular.module('my_app', []);
app.controller('my_ctrl', function($scope, $http) {
  $http.get("student-data.php") // data source for options 
  .then(function (response) {$scope.details = response.data.student_data;});
$scope.onChange = function()
{
var id=$scope.students.id;
var name=$scope.students.name;
document.getElementById('d1').innerHTML="Welcome " + name + " Your id : " + id;
}
  
});
</script>
Dropdown List Box DEMO: onChange Event to post selected option to back end script
DEMO: Options using JSON format DEMO: Options from MySQL database Displaying records from MySQL database table

Post your comments , suggestion , error , requirements etc here

We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2021 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer