dynamic item selection of product and price

dynamic item selection of product and price - javascript

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>

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

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>

Related

Dynamically generate nested inputs in form

I'm very new into frontend, so I appreciate any help.
I'm trying to build a form, where user select an option from element and then depending on condition, dynamically generates another one (and some other inputs) as a child elements.
Finally what I'm trying to get is JSON with nested structure. E.g.
fields: [{type: 'List', value: [{type: 'Map', value: [{type: 'Integer', value: 5}, {type: 'List', value: [and so on...]]]}]
I have already started to code it in native JS and this is what I have so far (snippet below).
I want to release something similar with VUE.js library (or maybe someone can tell me any other useful libraries), cuz I want to control visibility of my inputs based on some conditions and some other useful features...but I dont know how to dynamically push elements into nested into nested and so on...I appriciate any help, any ideas and any examples. Thanks!
let template = `
<select name="type" onChange="createChildElement(this)" aria-label="Select type">
<option value="List">Select type</option>
<option value="List">List</option>
<option value="Map">Map</option>
<option value="Integer">Integer</option>
</select>
<select name="method" aria-label="Метод генерации">
<option value="Static">Static</option>
<option value="Random">Random</option>
<option value="Range">Range</option>
</select>
<input name="size" type="text" placeholder="Size">
<input name="value" type="text" placeholder="Value">
`;
function createChildElement(e) {
if(e.value == "List") {
var x = document.createElement('ul');
var z = document.createElement('li');
z.insertAdjacentHTML( 'beforeend', template );
x.appendChild(z);
e.parentNode.appendChild(x);
}
if(e.value == "Map") {
var x = document.createElement('ul');
var z = document.createElement('li');
z.insertAdjacentHTML( 'beforeend', template );
x.appendChild(z);
var y = document.createElement('ul');
var n = document.createElement('li');
n.insertAdjacentHTML( 'beforeend', template );
y.appendChild(n);
e.parentNode.appendChild(x);
e.parentNode.appendChild(y);
}
}
<body>
<div id="main-container">
<ul><li><div class="singleton-card ml-2">
<select name="type" onChange="createChildElement(this)" aria-label="Select type">
<option value="List">Select type</option>
<option value="List">List</option>
<option value="Map">Map</option>
<option value="Integer">Integer</option>
</select>
<select name="method" aria-label="Метод генерации">
<option value="Static">Static</option>
<option value="Random">Random</option>
<option value="Range">Range</option>
</select>
<input name="size" type="text" placeholder="Size">
<input name="value" type="text" placeholder="Value">
</div></li></ul>
</div>
</body>
I just found this example (https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-tree-view?from-embed), I want to build something similar, but as a form with selects and inputs (just like my snippet example).

If I understand correctly, you're trying to create dependent dropdowns. You can check the following codepen for creating a dependent dropdown in vue.js
https://codepen.io/adnanshussain/pen/KqVxXL
JS
var model_options = {
1: [{ text: "Accord", id: 1 }, { text: "Civic", id: 2 }],
2: [{ text: "Corolla", id: 3 }, { text: "Hi Ace", id: 4 }],
3: [{ text: "Altima", id: 5 }, { text: "Zuke", id: 6 }],
4: [{ text: "Alto", id: 7 }, { text: "Swift", id: 8 }]
};
var makes_options = [
{ text: "Honda", id: 1 },
{ text: "Toyota", id: 2 },
{ text: "Nissan", id: 3 },
{ text: "Suzuki", id: 4 }
];
var vm_makes = new Vue({
el: "#app",
data: {
make: null,
model: null,
makes_options: makes_options,
model_options: model_options,
},
watch: {
make: function(event) {
$('#vehicle-models').dropdown('clear');
}
}
});
$('.ui.dropdown').dropdown();
HTML
<div id="app" class="ui grid">
<div class="row">
<div class="column">
<div class="ui label">Vechicle Make</div>
<select class="ui dropdown" v-model="make" id="vehicle-makes">
<option v-for="option in makes_options" v-bind:value="option.id">
{{ option.text }}
</option>
</select>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui label">Vechicle Model</div>
<select class="ui dropdown" id="vehicle-models" v-model="model">
<option
v-for="option in model_options[make]"
:value="option.id"
:key="option.id"
>
{{ option.text }}
</option>
</select>
</div>
</div>
</div>

Display text of select option with button jQuery

Hello guys i have a question here. So in this problem i can't display the text from selected option while i click order button. For the result i need the selected option i choose and display it into a div. Any suggestion what i must change or add here?
P.S : Sorry i'm still learning here, i hope my question didn't confuse anyone here..
html
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br />
<div class="row">
<div class="col-md-6">
<select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br />
<div class="col-md-6">
<select class="form-select form-select-lg mb-3" id="type_select"></select>
</div>
</div>
</div>
</div>
<br />
<button type="button" style="width:50%; margin-left:25%; margin-right:25%">Order</button>
<br />
<div class="result"></div>
js
var data = {
Food: [
{
id: 1,
name: 'Fried Rice',
price: '10.000'
},
{
id: 2,
name: 'Fried Noodle',
price: '9.000'
},
{
id: 3,
name: 'Pancake',
price: '8.500'
},
{
id: 4,
name: 'French Fries',
price: '7.500'
}
],
Drink: [
{
id: 1,
name: 'Cola',
price: '4.600'
},
{
id: 2,
name: 'Orange Juice',
price: '5.400'
},
{
id: 3,
name: 'Mineral Water',
price: '3.500'
},
{
id: 4,
name: 'Coffee',
price: '5.800'
}
]
}
function handleChange() {
var x = document.getElementById("category_select").value;
var dataOptions = data[x]
var dataSelect = document.getElementById('type_select')
dataSelect.innerHTML = ''
dataOptions.forEach(function (option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
dataSelect.appendChild(optionEle)
})
}
handleChange()
$(document).ready(function () {
$("button").click(function () {
var selectMenu = [];
$.each($("#type_select"), function () {
selectMenu.push($(this)).val();
});
$(".result").html(selectMenu);
});
});

You should declare the array outside the click handler function. Also , you probably want to store the label attribute of the selected option. Join the array items with , before showing in the element:
var data = {
Food: [
{
id: 1,
name: 'Fried Rice',
price: '10.000'
},
{
id: 2,
name: 'Fried Noodle',
price: '9.000'
},
{
id: 3,
name: 'Pancake',
price: '8.500'
},
{
id: 4,
name: 'French Fries',
price: '7.500'
}
],
Drink: [
{
id: 1,
name: 'Cola',
price: '4.600'
},
{
id: 2,
name: 'Orange Juice',
price: '5.400'
},
{
id: 3,
name: 'Mineral Water',
price: '3.500'
},
{
id: 4,
name: 'Coffee',
price: '5.800'
}
]
}
function handleChange() {
var x = document.getElementById("category_select").value;
var dataOptions = data[x]
var dataSelect = document.getElementById('type_select')
dataSelect.innerHTML = ''
dataOptions.forEach(function (option) {
var optionEle = document.createElement('option')
optionEle.value = option.id
optionEle.label = option.name
dataSelect.appendChild(optionEle)
})
}
handleChange()
$(document).ready(function () {
var selectMenu = [];
$("button").click(function () {
selectMenu.push($("#type_select option:selected").attr('label'));
$(".result").html(selectMenu.join(', '));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="container-fluid text-center">
<h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
<br />
<div class="row">
<div class="col-md-6">
<select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
</div>
<br />
<div class="col-md-6">
<select class="form-select form-select-lg mb-3" id="type_select"></select>
</div>
</div>
</div>
</div>
<br />
<button type="button" style="width:50%; margin-left:25%; margin-right:25%">Order</button>
<br />
<div class="result"></div>

To do what you require you can get the text() from the selected option in the type_select element.
Also note that there's a few optimisations you can make to your code. Firstly, as you're using jQuery already you can use it to bind the event handler to the change of the #category_select element unobtrusively, which is better practice than using onX event attributes. Also, you can use map() and html() to create the option elements to be added to the DOM more succinctly.
In addition, note that I removed the each() loop over the #type_select as only a single value can be selected from it, so the loop is redundant.
With that said, try this:
var data = {Food:[{id:1,name:"Fried Rice",price:"10.000"},{id:2,name:"Fried Noodle",price:"9.000"},{id:3,name:"Pancake",price:"8.500"},{id:4,name:"French Fries",price:"7.500"}],Drink:[{id:1,name:"Cola",price:"4.600"},{id:2,name:"Orange Juice",price:"5.400"},{id:3,name:"Mineral Water",price:"3.500"},{id:4,name:"Coffee",price:"5.800"}]};
jQuery($ => {
let $category = $('#category_select');
let $type = $('#type_select');
$category.on('change', e => {
let options = data[e.target.value].map(o => `<option value="${o.id}">${o.name}</option>`);
$type.html(options);
}).trigger('change');
$("button").click(function() {
$(".result").html(`${$type.find('option:selected').text()}: ${$type.val()}`);
});
});
button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Irrelevant HTML removed from this example -->
<select class="form-select form-select-lg mb-3" id="category_select">
<option value="Food">Food</option>
<option value="Drink">Drink</option>
</select>
<select class="form-select form-select-lg mb-3" id="type_select"></select>
<button type="button">Order</button><br />
<div class="result"></div>

Angular 2 changing disabled/enabled select options

I'm using Angular2 and I have 2 selects:
<div ng-controller="ExampleController">
<form name="myForm">
<label for="companySelect"> Company: </label>
<select name="companySelect" id="companySelect">
<option *ngFor="let company of companies"
value="{{company.id}}"> {{company.name}}
</option>
</select>
<label for="documentTypeSelect"> Type: </label>
<select name="documentTypeSelect" id="documentTypeSelect">
<option value="type1">type1</option>
<option value="type2">type2</option>
<option value="type3">type3</option>
</select>
</form>
<hr>
</div>
I want to change second select options depending on the first select. I can get types (boolean value) by using
company.companyRelations.pop().type1
company.companyRelations.pop().type2
And now, if for example type1 is false, the option in second select should be disabled and if type2 is true, option should be enabled. Is that possible?
EDIT:
Companies in select have deasdv, invoic and orders properties which are true or false. How can i now pass these properties into component.ts properties? Is it possible by event or what? I want to get for example
company.companyRelations.pop().desadv
For company which is selected and it will change disabled options in the second one.
html
<form name="myForm">
<label for="companySelect"> Company: </label>
<select class="form-control" name="companySelect" id="companySelect"
[(ngModel)]="companySelect" (ngModelChange)="onChange($event)">
<option [ngValue]="undefined" disabled selected>Select...</option>
<option *ngFor="let company of companies" [ngValue]="company.id">
{{company.name}}</option>
</select>
<select name="documentTypeSelect" id="documentTypeSelect">
<option [ngValue]="undefined" disabled selected>Select...</option>
<option [disabled]="!desadv" value="desadv">desadv</option>
<option [disabled]="!invoic" value="invoic">invoic</option>
<option [disabled]="!orders" value="orders">orders</option>
</select>
</form>
component.ts
desadv: boolean = false;
invoic: boolean = false;
orders: boolean = false;
and here it will be something like:
onChange(event) {
if(event.desadv) {
this.desadv = true;
}
}
My solution:
html
<form name="myForm">
<label for="companySelect"> Company: </label>
<select name="companySelect" id="companySelect" [(ngModel)]="companySelect"
(ngModelChange)="onChange($event)">
<option [ngValue]="undefined" disabled selected>Select...</option>
<option *ngFor="let company of companies" [ngValue]="company">
{{company.name}}</option>
</select>
<label for="documentTypeSelect"> Type: </label>
<select name="documentTypeSelect" id="documentTypeSelect">
<option [ngValue]="undefined" disabled selected>Select...</option>
<option [disabled]="!desadv" value="desadv">desadv</option>
<option [disabled]="!invoic" value="invoic">invoic</option>
<option [disabled]="!orders" value="orders">orders</option>
<option [disabled]="!recadv" value="orders">recadv</option>
<option [disabled]="!shipment" value="orders">shipment</option>
</select>
component.ts
onChange(event) {
this.desadv = event.companyRelations[0].desadv;
this.invoic = event.companyRelations[0].invoic;
this.orders = event.companyRelations[0].orders;
this.recadv = event.companyRelations[0].recadv;
this.shipment = event.companyRelations[0].shipment;
}

Try this :
<select class="form-control" name="companySelect" id="companySelect" [(ngModel)]="companySelect" (ngModelChange)="onChange($event)">
<option [ngValue]="undefined" disabled selected>Select...</option>
<option *ngFor="let company of companies" [ngValue]="company.id">{{company.name}}</option>
</select>
<select [disabled]="btnDisable" name="documentTypeSelect" id="documentTypeSelect">
<option value="type1">type1</option>
<option value="type2">type2</option>
<option value="type3">type3</option>
</select>
component.ts
private companySelect: any;
private btnDisable: boolean = true;
onChange(event) {
if(event) {
this.btnDisable = false;
}
}

Yes it is possible.
I have created a demo in which second drop down will be enabled depending upon the value of flag in first drop down object.
// Code goes here
var myApp = angular.module('plunker',[]);
angular.module('plunker').controller('MyCtrl', MyCtrl)
MyCtrl.$inject = ['$scope'];
function MyCtrl($scope) {
$scope.items1 = [{
id: 1,
label: 'aLabel',
'flag':true,
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
'flag':false,
subItem: { name: 'bSubItem' }
}];
$scope.items2 = [{
id: 1,
label: 'MyName',
'flag':true,
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'YourName',
'flag':false,
subItem: { name: 'bSubItem' }
}];
$scope.changeDetect = function(){
$scope.selected1='';
console.log($scope.selected);
if($scope.selected.flag)
{
$scope.flagValue=false;
} else {
$scope.flagValue=true;
}
}
$scope.flagValue=true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MyCtrl">
<select ng-options="item as item.label for item in items1 track by item.id" ng-model="selected" ng-change="changeDetect()"></select>
<select ng-options="item as item.label for item in items2 track by item.id" ng-model="selected1" ng-disabled="flagValue"></select>
</div>
In AngularJS 2
<select [ngModel]="selectedDeviceObj" (ngModelChange)="onChangeObj($event)" name="sel3">
<option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option>
</select>
<select [ngModel]="selectedDeviceObj1" name="sel2" [disabled]="flag">
<option [ngValue]="i" *ngFor="let i of deviceObjects1">{{i.name}}</option>
</select>
onChangeObj(newObj) {
this.selectedDeviceObj1='';
console.log(newObj);
this.selectedDeviceObj = newObj;
if(newObj.flag){
this.flag = false;
}
else {
this.flag = true;
}
Please find Demo Link Plunkr

In AngularJS, how to change the default option of a select?

I am using AngularJS. There are two select, the first is the "team select," the second is the "member select." If the "team select" have the members, the "member select" show " select the member ." If the "team select" don't have the members, the 'member select" show "no member."
My problem is how to change the default option of the "member select".
This is my code:
<script src="angular.js"></script>
<div class="bigDiv">
<select class="common_select" name="xxx" ng-options="item as item.teamname for item in team_array" ng-model="select_team" id="" ng-change="selectMemberFun(select_team)">
<option value="" disabled selected hidden>select a team</option>
</select>
<select class="common_select" name="xxxxx" id="" ng-options="item as item.name for item in select_team.members" ng-model="select_member">
<option ng-show="!have_member" value="" disabled selected hidden>no member</option>
<option ng-show="have_member" value="" disabled selected hidden>select a member</option>\
</select>
</div>
<script src="angular.js"></script>
<script>
angular.module('app',[]).controller('xxx',['$scope', function ($scope) {
$scope.have_member = false;
$scope.team_array = [
{teamname: "team1", members:[ {name:'team1member1'}, {name:'team1member2'}]},
{teamname: "team2", members:[ {name:'team2member1'}, {name:'team2member2'}]},
{teamname: "team3", members:[]},
];
$scope.selectMemberFun = function (team) {
if(team.members.length == 0){
$scope.have_member = false;
} else {
$scope.have_member = true;
}
}
}])
</script>
Why does the 'ng-show' directive not work ? The "member select" always shows "no member".

I've tried a few ways, looks like this one works.
angular.module('app', []).controller('TestController', ['$scope',
function($scope) {
$scope.have_member = false;
$scope.team_array = [{
teamname: "team1",
members: [{ name: 'team1member1' }, { name: 'team1member2' }]
}, {
teamname: "team2",
members: [{ name: 'team2member1' }, { name: 'team2member2' }]
}, {
teamname: "team3",
members: []
}, ];
$scope.selectMemberFun = function(team) {
if (team.members.length == 0) {
$scope.have_member = false;
} else {
$scope.have_member = true;
}
}
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div class="bigDiv" ng-app="app" ng-controller="TestController">
<select class="common_select" name="xxx" ng-options="item as item.teamname for item in team_array" ng-model="select_team" id="" ng-change="selectMemberFun(select_team)">
<option value="" disabled selected hidden>select a team</option>
</select>
<select class="common_select" name="xxxxx" id="" ng-options="item as item.name for item in select_team.members" ng-model="select_member">
<option value="" disabled selected hidden>{{have_member ? 'select a member' : 'no member'}}</option>
</select>
</div>

According to the documentation -> https://docs.angularjs.org/api/ng/directive/select
<select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
<option value="">---Please select---</option> <!-- not selected / blank option -->
<option value="{{data.option1}}">Option 1</option> <!-- interpolation -->
<option value="option-2">Option 2</option>
</select>

It doesn't work because ngOptions is like ngReapeat in that it will ONLY iterate when there are values in the select_team.members array. In Team3 the member array is empty, so all the inner <option></option> are skipped.

Angular JS - Dependent drop downs (3)

In Angular JS I am trying to implement 3 dependent drop downs. The data for the second drop down is loaded based on the first drop and the 3rd is based on 2nd.
I am having problem in setting the data to the second dropdown after choosing first one.
Plunkr : https://plnkr.co/edit/JMXmT32ljR0yjFL2S347?p=preview
The above sample Plunker is with hard coded array index values like below, but instead I want to make this index value dynamic according to the selected dropdown index.
conScopeFreqStartDates[0].frequencies
and
conScopeFreqStartDates[0].frequencies[0].startDates
My HTML code is like below,
<div class="col-md-2">
<select class="form-control" ng-model="reportType.consolidationScopeCode" ng-required="true" ng-change="consolidationScopeChanged(1)">
<option value="">Please select</option>
<option ng-repeat="consolidationScope in conScopeFreqStartDates" value="{{consolidationScope}}">{{consolidationScope.consolidationScopeLabel}}</option>
</select>
</div>
<div class="col-md-2">
<select class="form-control" ng-model="reportType.frequencyCode" ng-required="true">
<option value="">Please select</option>
<option ng-repeat="frequency in conScopeFreqStartDates[0].frequencies" value="{{frequency.frequencyCode}}">{{frequency.frequencyLabel}}</option>
</select>
</div>
<div class="col-md-2">
<select class="form-control" ng-model="reportType.startDate" ng-required="true">
<option value="">Please select</option>
<option ng-repeat="startDate in conScopeFreqStartDates[0].frequencies[0].startDates" value="{{startDate}}">{{startDate}}</option>
</select>
</div>
And JSON data is like this,
[
{
"consolidationScopeId": 4009,
"consolidationScopeLabel": "Consolidated",
"frequencies": [
{
"frequencyCode": "O",
"frequencyLabel": "Ad Hoc",
"startDates": [
"01-01-2013"
]
},
{
"frequencyCode": "Y",
"frequencyLabel": "Annual",
"startDates": [
"31-12-2016"
]
}
]
},
{
"consolidationScopeId": 4008,
"consolidationScopeLabel": "Individual",
"frequencies": [
{
"frequencyCode": "O",
"frequencyLabel": "Ad Hoc",
"startDates": [
"01-01-2013"
]
},
{
"frequencyCode": "Y",
"frequencyLabel": "Annual",
"startDates": [
"31-12-2016"
]
}
]
}
]

This is now implemented as below
Demo : https://plnkr.co/edit/G25UYk8rfcyjQYPyF1dX?p=preview
Javascript
var jayApp = angular.module('jayApp', []);
jayApp.controller('jayController', function($scope) {
$scope.conScopeFreqStartDates = [
{
"consolidationScopeId": 4009,
"consolidationScopeLabel": "Consolidated",
"frequencies": [
{
"frequencyCode": "O",
"frequencyLabel": "1 Ad Hoc",
"startDates": [
"01-01-2013",
"02-01-2013",
"03-01-2013"
]
},
{
"frequencyCode": "Y",
"frequencyLabel": "1 Annual",
"startDates": [
"01-2-2013",
"02-2-2013",
"03-2-2013"
]
}
]
},
{
"consolidationScopeId": 4008,
"consolidationScopeLabel": "Individual",
"frequencies": [
{
"frequencyCode": "O",
"frequencyLabel": "2 Ad Hoc",
"startDates": [
"01-01-2014",
"02-01-2014",
"03-01-2014"
]
},
{
"frequencyCode": "Y",
"frequencyLabel": "2 Annual",
"startDates": [
"01-02-2014",
"02-02-2014",
"03-02-2014"
]
}
]
}
];
// Consolidation scope drop down change event
$scope.consolidationScopeChanged = function(consScope) {
$scope.frequencies = "";
$scope.startDates = "";
if(consScope == undefined) {
return;
}
var consolidationScope = JSON.parse(consScope);
$scope.frequencies = consolidationScope.frequencies;
// $scope.reportType.consolidationScopeCode = consolidationScope.consolidationScopeCode;
}
// Frequencies drop down change event
$scope.frequencyChanged = function(freq) {
$scope.startDates = "";
if(freq == undefined) {
return;
}
// console.log('freq : ' +freq);
var frequency = JSON.parse(freq);
$scope.startDates = frequency.startDates;
// $scope.reportType.frequencyCode = frequency.frequencyCode;
}
$scope.check = function(data) {
console.log("data : " +data);
console.log("reportType : " +$scope.reportType.consolidationScope);
// var data2 = JSON.parse(data);
}
})
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="jquery#1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script data-require="bootstrap#3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="jayApp" ng-controller="jayController">
<h3>AngularJS Dependent dropdowns </h3>
<br />
<br />
<div class="col-md-2">
<select class="form-control" ng-model="reportType.consolidationScope" ng-required="true" ng-change="consolidationScopeChanged(reportType.consolidationScope)">
<option value="">Please select</option>
<option ng-repeat="consolidationScope in conScopeFreqStartDates" value="{{consolidationScope}}">{{consolidationScope.consolidationScopeLabel}}</option>
</select>
</div>
<div class="col-md-2">
<select class="form-control" ng-model="reportType.frequency" ng-required="true" ng-change="frequencyChanged(reportType.frequency)">
<option value="">Please select</option>
<option ng-repeat="frequency in frequencies" value="{{frequency}}">{{frequency.frequencyLabel}}</option>
</select>
</div>
<div class="col-md-2">
<select class="form-control" ng-model="reportType.startDate" ng-required="true">
<option value="">Please select</option>
<option ng-repeat="startDate in startDates" value="{{startDate}}">{{startDate}}</option>
</select>
</div>
<br>
<button type="button" class="btn btn-primary"
ng-click="check(reportType)">Submit</button>
</body>
</html>

<div ng-app="app" ng-controller="CountryController">
<div class="form-group">
Country:
<select id="country" ng-model="states" ng-options="country for (country, states) in countries">
<option value=''>Select</option>
</select>
</div>
<div>
States:
<select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
<option value=''>Select</option>
</select>
</div>
<div>
City:
<select id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities">
<option value=''>Select</option>
</select>
</div>
</div>
JS File:
var app = angular.module('app', []);
app.controller('CountryController', function($scope) {
$scope.countries = {
'India': {
'Gujarat': ['amreli','anand','surat','mahesana'],
'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'],
'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'],
'Maharashtra': ['Mumba','thane','vasai']
},
'USA': {
'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
'Los Angeles': ['Burbank', 'Hollywood'],
'California': ['Salinas','Redding']
},
'Australia': {
'New South Wales': ['Sydney','Orange','Broken Hill'],
'Victoria': ['Benalla','Melbourne']
}
};
});

Develop Reference

JavaScript is the programming language of the Web.

dynamic item selection of product and price - javascript

Related

Dynamically generate nested inputs in form

Display text of select option with button jQuery

Angular 2 changing disabled/enabled select options

In AngularJS, how to change the default option of a select?

Angular JS - Dependent drop downs (3)

Categories

Resources