Develop Reference

Dependent Dropdown list in Javascript, jQuery, Json & Ajax

How can I make it so when I select an option it will only populate that one area?
I only want the specific places in that area.
example picture.]
Example of the output (1)
Example of the output (2)
this is the json code that I want to have a function and connect the two or more files.
json file 1
{
"code": "010000000",
"name": "Ilocos Region",
"altName": "Region I"
}
json file 2
{
"code": "012800000",
"name": "Ilocos Norte",
"altName": null,
"region": "010000000"
},
{
"code": "012900000",
"name": "Ilocos Sur",
"altName": null,
"region": "010000000"
},
{
"code": "013300000",
"name": "La Union",
"altName": null,
"region": "010000000"
},
{
"code": "015500000",
"name": "Pangasinan",
"altName": null,
"region": "010000000"
}
here is the code
html part
<div class="container form-group" style="width:600px; margin-top: 10vh">
<form action="" method="GET" id="addform">
<div class="form-group">
<select name="region" id="region" class="form-control input-sm" required>
<option value="">Select Region</option>
</select>
</div>
<div class="form-group">
<select name="province" id="province" class="form-control input-sm" required>
<option value="">Select Province</option>
</select>
</div>
</form>
</div>
<script>
$(function(){
let regionOption;
let provinceOption;
//FOR REGION
$.getJSON('regions.json', function(result){
regionOption += `<option value="">Select Region</option>`;
$.each(result, function(i, region){
regionOption += `<option value='${region.code}'> ${region.altName}</option>`;
});
$('#region').html(regionOption);
});
//FOR PROVINCE
$('#region').change(function(){
$.getJSON('provinces.json', function(result){
provinceOption += `<option value="">Select Province</option>`;
$.each(result, function(region, province){
provinceOption += `<option value='${province.name}'> ${province.name}</option>`;
});
$('#province').html(provinceOption);
});
});
});
</script>
my failed attempt is this part :
$('#region').change(function(){
if($(this).val() === $(this).val()){
$.getJSON('provinces.json', function(result){
provinceOption += `<option value="">Select Province</option>`;
$.each(result, function(region, province){
provinceOption += `<option value='${province.name}'> ${province.name}</option>`;
});
$('#province').html(provinceOption);
});
}
});

You can use .filter() to filter your json return inside ajax then inside this compare value of select-box with all values of region if they matches get that data . Finally loop through filter datas and show them inside your select-box.
Demo Code :
//just for demo :)
var result = [{
"code": "010000000",
"name": "Ilocos Region",
"altName": "Region I"
}, {
"code": "010000002",
"name": "Ilocos Region2",
"altName": "Region 2"
}]
var json2 = [
{
"code": "012800000",
"name": "Ilocos Norte",
"altName": null,
"region": "010000000"
},
{
"code": "012900000",
"name": "Ilocos Sur",
"altName": null,
"region": "010000000"
},
{
"code": "013300000",
"name": "La Union",
"altName": null,
"region": "010000002"
},
{
"code": "015500000",
"name": "Pangasinan",
"altName": null,
"region": "010000002"
}
]
$(function() {
let regionOption;
let provinceOption;
//FOR REGION
/* $.getJSON('regions.json', function(result) {*/
regionOption += `<option value="">Select Region</option>`;
$.each(result, function(i, region) {
regionOption += `<option value='${region.code}'> ${region.altName}</option>`;
});
$('#region').html(regionOption);
/* });*/
$('#region').change(function() {
var values = $(this).val()
var provinceOption = ""
/*$.getJSON('provinces.json', function(json2) {*/
//filter your json return..
var items = $(json2)
.filter(function(i, n) {
return n.region === values; //get value where region is same
});
provinceOption += `<option value="">Select Province</option>`;
//loop through dates
$.each(items, function(region, province) {
provinceOption += `<option value='${province.name}'> ${province.name}</option>`;
});
$('#province').html(provinceOption);
/* });*/
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container form-group" style="width:600px; margin-top: 10vh">
<form action="" method="GET" id="addform">
<div class="form-group">
<select name="region" id="region" class="form-control input-sm" required>
<option value="">Select Region</option>
</select>
</div>
<div class="form-group">
<select name="province" id="province" class="form-control input-sm" required>
<option value="">Select Province</option>
</select>
</div>
</form>
</div>

Angularjs drop-down select dynamically

Hi am a beginner in Angularjs, I want to select drop-down selected dynamically.
I refer some blogs but I don't understand that.
This is my HTML code:
<select class="form-control" name="category_id" ng-model="formData.category_id" ng-options="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories" ng-required="true">
<option value="">Select Sub Directory</option>
</select>
Js code:
$scope.getData = function() {
return webServices.getSync('getshops/' + $scope.Id).then(function(getData) {
if (getData.status == 200) {
$scope.formData = getData.data;
console.log($scope.formData);
} else {
$rootScope.$emit("showerror", getData);
}
});
}
$scope.getSubDirectories = function()
{
return webServices.getSync('getSubDirectories').then(function(getData)
{
$rootScope.loading = false;
if (getData.status == 200)
{
$scope.formData.getSubDirectories = getData.data;
} else {
$rootScope.$emit("showerror", getData);
}
//console.log($scope.formData.getSubDirectories);
});
}
My result in console
{
"id": 1,
"membership_type_id": 1,
"name": "Kallyan",
"address": "100 feet road",
"location": "Coimbatore",
"description": "Test",
"banner_image": "upload/directory/contact/directoryMsrq4NhsD1.jpg",
"business_days": [
"M",
"T",
"W",
"Th",
"F",
"S"
],
"start_time": "2019-01-10T09:01:00+05:30",
"end_time": "2019-01-10T10:01:00+05:30",
"contact_number": "9874563210",
"latitude": 11.2,
"longitude": 9.5,
"is_certified": 1,
"status": 3,
"rating": 0,
"is_online_order": 1,
"created_at": "1970-01-01 05:30:01",
"created_by": 0,
"is_active": 1,
"updated_at": "2019-01-09 18:14:22",
"updated_by": 0,
"status_updated_by": 0,
"status_updated_on": "2019-01-09 18:14:22",
"priority": 0,
"comments": "Test",
"additional_information": "",
"old_banner_image": "directoryMsrq4NhsD1.jpg",
"sub_directory": "Jewellery",
"getSubDirectories": [
0: {id: 2, name: "Jewellery", image: "directory5Wltlbhkwl.jpg", thumbnail_image: "directory5Wltlbhkwl.jpg", isparent: 1, …}
1: {id: 3, name: "Mobile", image: "directoryjWQeyCQlGe.jpg", thumbnail_image: "directoryjWQeyCQlGe.jpg", isparent: 1, …}
2: {id: 6, name: "KPN", image: "directoryC8qEC3o3Gh.jpg", thumbnail_image: "directoryC8qEC3o3Gh.jpg", isparent: 1, …}
]
}
My result page:
Here I want to select sub_directory: Jewellery as selected drop-down value.
I don't understand this code in HTML ng-options="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories".
Please give the answer. Thanks in advance.

Try like this way.
<select class="form-control" name="category_id" ng-model="formData.category_id" ng-options="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories" ng-required="true" ng-init="selected='Jewellery'">
<option value="">Select Sub Directory</option>
</select>
I have add this line ng-init="selected='Jewellery'" in your select tag.

<select class="account-form" ng-model="formData.category_id" id="category_id" name="category_id">
<option value="">---Select---</option>
<option ng-repeat="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories" ng-selected="sub_directory.id == 1">
{{sub_directory.name}}
</option>
</select>

Finally i got a result
<select class="form-control" ng-model="formData.category_id" ng-options="directory.id as directory.name for directory in formData.getSubDirectories" ng-init="formData.category_id='2'">
<option value="">Select Sub Directory</option>
</select>

Angular ng-option filtering with a condition

The following list want to bind in a drop down with condition type="0"
$scope.ListPrintDestination = [{ id: "0", Name: "Printer",Type:"0" }, { id: "1", Name: "Windows" ,Type:"0"}, { id: "2", Name: "No Print" ,Type:"1"}];
then how will modify below code
<select ng-model="num" ng-options="lst as lst.AcNo for lst in lstPrint track by lst.AcNo">
<option selected="selected">select</option>
</select>

You can use filter for Type='0', and in html iterate on ListPrintDestination.
Demo:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function MyCtrl($scope) {
$scope.ListPrintDestination = [{
id: "0",
Name: "Printer",
Type: "0"
}, {
id: "1",
Name: "Windows",
Type: "0"
}, {
id: "2",
Name: "No Print",
Type: "1"
}];
});
<script src="https://code.angularjs.org/1.5.2/angular.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="num" ng-options="lst as lst.Name for lst in ListPrintDestination | filter : {Type : '0'} ">
<option selected="selected">select</option>
</select>
</div>

Default Value of select box not being set

I have a data structure like so:
$scope.personalityFields.traveller_type = [
{"id":1,"value":"Rude", "color":"red"},
{"id":2,"value":"Cordial", "color":"yellow"},
{"id":3,"value":"Very Friendly", "color":"green"},
];
And a select box that looks like so:
<select map-value name="traveller_type" ng-init="init_select()" class="full-width" ng-model="traveller_type" ng-options="item as item.value for item in personalityFields.traveller_type">
<option value="" disabled selected> Choose ...</option>
</select>
How do I set the value of the select box to a value based on a response that maps to the "value" field in the attached JSON? Please help !
So if in the response, the traveller_type is field is set to "Rude", I would want the value of "Rude" to be set in the select box.
This what the response looks like:
someObject = {
traveller_type: "Rude"
}
this needs to be displayed on the select box

If you have only value("Rude","Cordial","Friendly") back from response, you have to change ngOptions syntax to be ng-options="item.vaue as item.value for item in personalityFields.traveller_type"(bind item.value to options)
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.traveller_type = 'Rude';
$scope.personalityFields = {
"traveller_type": [{
"id": 1,
"value": "Rude",
"color": "red"
},
{
"id": 2,
"value": "Cordial",
"color": "yellow"
},
{
"id": 3,
"value": "Very Friendly",
"color": "green"
},
]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options="
item.vaue as item.value for item in personalityFields.traveller_type">
<option value="" disabled selected> Choose ...</option>
</select>
{{traveller_type}}
</div>
Else you have entire object({"id":1,"value":"Rude", "color":"red"}) back from response, you have to change ngOptions syntax to be ng-options="item as item.value for item in personalityFields.traveller_type track by item.value"(use track by to only compare value property)
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.traveller_type = {
"id": 1,
"value": "Rude",
"color": "red"
};
$scope.personalityFields = {
"traveller_type": [{
"id": 1,
"value": "Rude",
"color": "red"
},
{
"id": 2,
"value": "Cordial",
"color": "yellow"
},
{
"id": 3,
"value": "Very Friendly",
"color": "green"
},
]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options="
item as item.value for item in personalityFields.traveller_type track by item.value">
<option value="" disabled selected> Choose ...</option>
</select>
{{traveller_type}}
</div>

There are a couple of things wrong with your code, below is an example of you can do to achieve your goal:
angular.module('limitToExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.serverResponse = {
"id": 1,
"value": "Rude",
"color": "red"
};
$scope.personalityFields = {
traveller_type: [{
"id": 1,
"value": "Rude",
"color": "red"
}, {
"id": 2,
"value": "Cordial",
"color": "yellow"
}, {
"id": 3,
"value": "Very Friendly",
"color": "green"
}],
}
}]);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example103-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
</head>
<body ng-app="limitToExample">
<div ng-controller="ExampleController">
<select map-value name="traveller_type" class="full-width" ng-model="serverResponse" ng-options="item as item.value for item in personalityFields.traveller_type track by item.value">
</select>
</div>
</body>
</html>
This is one way of setting the default value, you can make it dynamic based on the response of your server (guess that is what you want?)
I am only replicating what #Pengyy describes in his answer, so feel free to accept his over mine.

why is ng-model not checking default radio button?

Below is the fiddle i am working:
http://jsfiddle.net/3c0dxf4d/
The ng-model has an object and the ng-value maps to object, why is my default value {"id":1,"name":"Bill"}
not getting selected by default.

Check out this fiddle http://jsfiddle.net/roz98eda/
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.customers = [{
"id": 1,
"name": "Bill"
}, {
"id": 2,
"name": "Bob"
}, {
"id": 3,
"name": "Biff"
}];
$scope.customer = {};
$scope.currentCustomer = {
"id": 1
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<table>
<tr ng-repeat="theCustomer in customers">
<td>
<input type="radio" ng-model="$parent.currentCustomer.id" ng-value="theCustomer.id">{{theCustomer.name}}</td>
</tr>
</table>
<br>
<div>{{currentCustomer}}</div>
</div>
</div>

Because you've put the initial value to
$scope.currentCustomer = {
"id": 1,
"name": "Bill"
};
Just remove or change it.
Please check following code please.
app.controller("ctrl", function ($scope) {
$scope.customers = [{
"id": 1,
"name": "Bill"
}, {
"id": 2,
"name": "Bob"
}, {
"id": 3,
"name": "Biff"
}];
$scope.customer = {};
*$scope.currentCustomer = {
"id": 1,
"name": "Bill"
};*
})

Change
<input type="radio" ng-model="$parent.currentCustomer" name="foo" ng-value="theCustomer" id="{{theCustomer.id}}">
To
<input type="radio" ng-model="$parent.currentCustomer.id" name="foo" ng-value="theCustomer.id" id="{{theCustomer.id}}">{{theCustomer.name}}</td>
From ng-value docs
It is mainly used on input[radio] and option elements, so that when
the element is selected, the ngModel of that element (or its select
parent element) is set to the bound value.