default select value based on drop down selection

Question

code for Centre name drop down :

<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6">
					<label>Centre Name<span class="required">*</span></label>
					<div class="form-group">
						<select data-selectpicker class="selectpicker" name="location"
							data-ng-model="user.location_id" required>
							<option value="">Select</option>
							<option data-ng-repeat="location in locationValues"
								value="{{location.location_id}}">{{location.name}}</option>
						</select> 
						<span class="input-error-span" data-ng-show="editUser.$submitted || editUser.location.$touched || editUser.location.$dirty">
							<span data-ng-show="editUser.location.$error.required">{{'REQUIRED_CENTRE' | translate}}</span>
						</span>
					</div>
				</div>

My application having one drop down and one multi select box. Value of both fetched from same database.

Now problem is that user needs to select option from drop down first. this selection should be reflected on multi select which is on same page. means that whatever option selected from drop down box must be default selection in multi select which user can't change.

Please help me find out solution.

code for available centre multi select box:

<div class="col-lg-12 col-md-12 col-sm-4 col-xs-4"  data-ng-if="user.role_id == '2'">
					<label>Available In Centre<span class="required">*</span></label>
					<div class="form-group">
						<select name="location" class="form-control" multiple data-ng-multiple="true" data-ng-model="viewlocation" data-ng-options="obj.name for obj in locationValues" data-ng-init="obj.location_id = user.location_id" required>
						</select>						
						<span class="input-error-span" data-ng-show="editUser.$submitted || editUser.location.$touched">
							<span data-ng-show="editUser.location.$error.required">{{'REQUIRED_VIEWABLE_LOCATION' | translate}}</span>
						</span>
					</div>
				</div>

now if user select option from drop down then that option should be selected in multi select box. and user can't change it until he/she changes option in drop down.

Fill ng-model attribute of that select element with particular data which you have already selected. It will display all the selected elements and disable it if you have already selected. — Manish Singh
Just make http request to return exact data for multi select box while changing drop down value. If you share your code it would be helpful to explain. — Akhter Al Amin

Parth Khiera Parth Khiera · Accepted Answer · 2016-10-26T06:01:26

It's simply done using ng-disabled, check following fiddle

<div ng-app="exampleApp" ng-controller="appController">


     <select class="form-control" ng-model="disabledOptions">
        <option
            ng-repeat="fruit in example13data"
            ng-value="fruit.label"
        >{{fruit.label}}</option>
    </select>
    <br><br>

      <select class="form-control" multiple ng-model="disabledOptions1">
        <option
            ng-repeat="fruit in example13data"
            ng-disabled="disabledOptions.indexOf(fruit.label) !== -1"
            ng-value="fruit.label"
        >{{fruit.label}}</option>
    </select>

</div>

var myApp = angular.module('exampleApp',['angularjs-dropdown-multiselect']);

myApp.controller('appController', ['$scope', function($scope) {

        $scope.example13model = [];
        $scope.example13data = [
            {id: 1, label: "David"},
            {id: 2, label: "Jhon"},
            {id: 3, label: "Lisa"},
            {id: 4, label: "Nicole"},
            {id: 5, label: "Danny"}];

        $scope.disabledOptions = ['David'];
        $scope.disabledOptions1 = $scope.example13data[0];

}]);

https://jsfiddle.net/bmvtmzmm/140/

default select value based on drop down selection

2 Answers