Trying to get DropDown value - javascript

I'm trying to get Dropdown select value for my On change Function but got undefined value.
what I did so far is that
<div class="list">
<div class="item item-input item-select">
<div class="input-label">
Status
</div>
<select id="ddlstatus" ng-model="status" ng-change="getalert()" >
<option ng-repeat=" status in Status" value="{{status.StatusCodeId}}">{{status.StatusCode}}</option>
</select>
</div>
</div>
and my Angular Code is
$scope.StatusD =function(){
$scope.Status=[ ];
$http({
crossDomain: true,
type: 'GET',
dataType: 'jsonp',
url: Baseurl+'/api/Status'
}).then(function(resp){
$scope.Status = resp.data;
console.log($scope.Status);
});
};
$scope.getalert=function()alert(document.getElementById("ddlstatus").value)}
so what I'm missing here.how can I get selected dropdown value so I can use it further

You have bound your select's value to the $scope.status, so you can get the dropdowns value with $scope.status.
$scope.getalert = function() {
alert($scope.status).
}
Example
angular.module('app', []).controller('MyCtrl', ['$scope', function($scope){
$scope.status = 'value1';
$scope.getalert = function(){
alert($scope.status);
};
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MyCtrl">
<select id="ddlstatus" ng-model="status" ng-change="getalert()" >
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value4">Value 4</option>
</select>
</body>

The answer by Suren Srapyan has loophole that the first option in select box is displayed as undefined.
The below code is the solution for the same.
//--app.module.js--//
angular.module('app', []);
//--app.controller.js--//
angular.module('app')
.controller('StatusController', StatusController);
StatusController.$inject = ['$log'];
function StatusController($log) {
var vm = this;
vm.status = 'value1';
vm.showStatusConsole = showStatusConsole;
function showStatusConsole() {
$log.log('Current Status Is:- ' + vm.status);
}
}
<html ng-app="app">
<body ng-controller="StatusController as statusObj">
<select id="ddlstatus" ng-model="statusObj.status" ng-change="statusObj.showStatusConsole()">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value4">Value 4</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.module.js"></script>
<script src="app.controller.js"></script>
</body>
</html>

Related

My dropdownlist select onchange is not firing in angular js

I am very much new to AngularJS and I want to get values of OnChange of dropdownlist.
Below is my code which I tried
<div>
<select ng-controller="UserSelection as User" ng-model="User.UserSelected" ng-change="onSelectChange()">
<option value="SAP_Executive">SAP Executive</option>
<option value="Fiber_Engineer">Fiber Engineer</option>
<option value="Fiber_Lead">Fiber Lead</option>
<option value="CMM">CMM</option>
</select>
</div>
Angular code
angular.module('App', [])
.controller('UserSelection', function () {
var User = this;
User.onSelectChange = function () {
alert('change value selected');
};
});
My alert is not firing. Please suggest what I am missing here
Look here the following snippet. You have created an alias of your controller but not using it.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="App">
<select ng-controller="UserSelection as User" ng-model="User.UserSelected" ng-change="User.onSelectChange()" ng-init="User.UserSelected='--select--'">
<option value="--select--">--select--</option>
<option value="SAP_Executive">SAP Executive</option>
<option value="Fiber_Engineer">Fiber Engineer</option>
<option value="Fiber_Lead">Fiber Lead</option>
<option value="CMM">CMM</option>
</select>
</div>
<script>
angular.module('App', [])
.controller('UserSelection', function () {
var User = this;
User.onSelectChange = function () {
alert('change value selected');
};
});
</script>
</body>
</html>

Angular2: how to get data attr of select option

<select id="nameList">
<option data-age="18" value="Jack">Jack</option>
<option data-age="28" value="John">John</option>
<option data-age="18" value="Robbin">Robbin</option>
<option data-age="38" value="Johnson">Johnson</option>
</select>
<div id="output"></div>
$(document).ready(function(){
$(document).on('change',"#nameList",function(){
var age = $("option:selected",this).attr('data-age');
$("#output").html(age);
});
});
How to implement this one in Angular2 ?
refer this link: https://jsfiddle.net/vqmnLk5u/

Select item from selection box

I want to select my country from the selection box;
http://tr.investing.com/currencies/single-currency-crosses
there is a change_result(); in it's on change.
I get the selection box as;
$("#symbols")
But how will I trigger the on change box and reload the page according to the new selected option.
Something like this maybe?
$("#myselect").change(function() {
var selectedOption = $("#myselect option:selected").text();
var selectedValue = $(this).val();
// Do something here
$("#"+selectedValue).fadeIn(1000);
});
<div id="2" style="display:none;">
Magic Text
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
I think this will helps you
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="symbols">
<option value="0">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<script>
$(function(){
$('#symbols').on('change',function(){
var value=$(this).val();
alert(value);
});
});
</script>

How to get values of dropdown

Here is my HTML
<select class="height_selected">
<option>Select Height</option>
<option ng-model="userHeight" ng-init="1" value="1">123 cm</option>
<option ng-model="userHeight" ng-init="2" value="2">125 cm</option>
<option ng-model="userHeight" ng-init="3" value="3">124 cm</option>
</select>
<a type="button" ng-click="updateHeight()">Save</a></div>
In the controller i do
userHeight = $scope.userHeight;
But i am not getting any value.
How can i get the value ?
You wrongly used ng-model for options. It is used for only inputs fields like input box, textarea, select
For More Reference
it comes like
<select class="height_selected" ng-model="userHeight">
<option>Select Height</option>
<option value="1">123 cm</option>
<option value="2">125 cm</option>
<option value="3">124 cm</option>
</select>
Now only you get the value
put ng-model in select.
also if you want to select 1 item default than
$scope.userHeight = "/value of option/";
Here you are:
var app = angular.module('app', []);
app.controller('controller', ['$scope', controllerFunction]);
function controllerFunction($scope) {
$scope.companies = [{
'id': 1,
'name': "c1"
}, {
'id': 2,
'name': "c2"
}];
$scope.companyChange = function() {
alert(angular.toJson($scope.company));
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<select ng-model="company" ng-options="c.name for c in companies track by c.id" ng-change="companyChange()">
<option value="">All</option>
</select>
</div>
Refer more: https://docs.angularjs.org/api/ng/directive/ngOptions
Hope this helps.

Show a tip for Options with Javascript

I have the following code which adds a bit of text below the select box when an item is selected. However it I can only get it to show the value of the select box. Is there any way I could get this to show a 3rd value?
<script type="text/javascript">
function dropdownTip(value){
console.log(value);
document.getElementById("result").innerHTML = value;
}</script>
<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
<option selected="selected" value="1">Client 1</option>
<option value="2">Client 2</option>
<option value="3">Client 3</option>
<option value="4">Client 4</option>
</select>
<div id="result"></div>
For example, I would like to add something like "Always remember to ask for the full name" on client one, and "Never ask for last name" On client 2.
This should work:
<script type="text/javascript">
function dropdownTip(value){
var preamble = 'default preamble';
if(value == 'Client 2') {
preamble = 'Never ask for last name on ';
}
if (value == 'Client one') {
preamble = 'Always remember to ask for the full name';
}
console.log(value);
document.getElementById("result").innerHTML = preamble + value;
}</script>
<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
<option selected="selected" value="1">Client 1</option>
<option value="2">Client 2</option>
<option value="3">Client 3</option>
<option value="4">Client 4</option>
</select>
<div id="result"></div>
You could use html5 data-* attributes.
Working demo.
javascript:
window.dropdownTip = function (obj) {
console.log(obj);
console.log(obj.value);
var sel = obj.options[obj.selectedIndex];
console.log(sel.getAttribute('data-desc'));
document.getElementById("result").innerHTML = obj.value;
document.getElementById("result").innerHTML += sel.getAttribute('data-desc');
}
html:
<body>
<select onchange="dropdownTip(this);" name="search_type" id="selector">
<option selected="selected" value="1" data-desc="test 1">Client 1</option>
<option value="2" data-desc="test 2">Client 2</option>
<option value="3" data-desc="test 3">Client 3</option>
<option value="4" data-desc="test 4">Client 4</option>
</select>
<div id="result"></div>
</body>

Categories