logo
down
shadow

AngularJS: On Change of Parent DropDown Option Also Changes the Dependant Drop Down Options Associated with Other Parent


AngularJS: On Change of Parent DropDown Option Also Changes the Dependant Drop Down Options Associated with Other Parent

By : user2956714
Date : November 22 2020, 10:56 AM
fixed the issue. Will look into that further Visit this Link to view the problem: http://plnkr.co/edit/CPxvE4SC6ScTH57s6CmQ?p=preview , You have several problems in your code.
code :
$scope.plan_options[index] = [
              {plan_option_id: 1, name: '10 Years'},
              {plan_option_id: 2, name: '20 Years'},
              {plan_option_id: 3, name: '30 Years'},
               ];
              break;


Share : facebook icon twitter icon
Table td tr html label select (trying to parent/link drop down options inside two drop down tabs)

Table td tr html label select (trying to parent/link drop down options inside two drop down tabs)


By : user2340182
Date : March 29 2020, 07:55 AM
angularjs dependant dropdown option value

angularjs dependant dropdown option value


By : Gary Caine
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Here is sample implementation for you. This will keep values in option tag.
code :
<div ng-app="Aplic" ng-controller="CountryCntrl">
    <select id="country" ng-model="selectedCountry" ng-options="country.id as country.name for country  in countries track by country.id">
        <option value="">Choose</option>
    </select>Departement:
    <select id="state"
    ng-model="selectedState"
    ng-disabled="!selectedCountry"
    ng-options="state.id as state.dep for state in ((countries | filter:{'id':selectedCountry})[0].states) track by state.id">
        <option value="">Choose</option>
    </select>


    <div>selectedCountry id: {{selectedCountry}}</div>
    <div>selectedState id: {{selectedState}}</div>
</div>
 $scope.countries =[
   {
     'id': '1',
      'name': "Aquitaine",
      'states': [{
         'id': '22',
         'dep': "Dordogne"
     }, {
         'id': '31',
         'dep': "Gironde"
     }]
   },
   {
     'id': '2',
      'name': "Auvergne",
      'states':  [{
         'id': '3',
         'dep': "Allier"
     }, {
         'id': '15',
         'dep': "Cantal"
     }]
   }];
need jquery to change the default option of 2nd dropdown to "select" whenever i change options in 1st dropdown

need jquery to change the default option of 2nd dropdown to "select" whenever i change options in 1st dropdown


By : bura
Date : March 29 2020, 07:55 AM
I wish this helpful for you You can use CSS alone to hide the other values on page load, and then filter through the select3 options. (You can't use your $(this).data('options').filter because this refers to #select2, not #select3, so the states options remain unchanged)
code :
const select2 = $("#select2");
select2.change(() => {
  const stateVal = select2.val();
  const select3Options = $('#select3').children();
  select3Options.show();
  select3Options.filter((_, elm) => elm.value && elm.value !== stateVal).hide();
  select3Options[0].selected = 'selected';
});
#select3 > option:not([value="0"]) {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <label for="select2">State:</label>
  <select name="select2" id="select2">
    <option value = "0">Select</option>
    <option value = "1">Maharashtra</option>
    <option value = "2">Gujarat</option>
    <option value = "3">Rajasthan</option>
  </select>

  <label for="select3">District:</label>
  <select name="select3" id="select3">
    <option value = "0">Select State</option>
    <option value = "1">Pune</option>
    <option value = "1">Vidarbha</option>
    <option value = "1">Thane</option>
    <option value = "2">Bharuch</option>
    <option value = "2">Ahmedabad</option>
    <option value = "2">Jamnagar</option>
    <option value = "3">Jaipur</option>
    <option value = "3">Jodhpur</option>
    <option value = "3">Bikaner</option>
  </select>
</body>
How to change options in child dropdown depending of selected option in parent dropdown with javascript?

How to change options in child dropdown depending of selected option in parent dropdown with javascript?


By : bongo
Date : March 29 2020, 07:55 AM
around this issue you can try this script unless hidding but you can disable other options
code :
    "use strict";
       window.onload = function() {
       document.getElementById('category_select').addEventListener("change", 
         function() {
            parent_();
         });
       function parent_() {

        let parent_ = document.getElementById('category_select');
        let ParentVal_ = parent_.options[parent_.selectedIndex].value;
        child_(ParentVal_);
        //return ParentVal_; // return parent_ value
    }

    function child_(ParentVal_) {
        let child = document.getElementById('type_select');
        for (var i = 0; i < child.options.length; i++) {
            if (child.options[i].value == ParentVal_) {
                child.options[i].disabled = true;
            }
            else
            {
                child.options[i].enabled = true;
            }
        }

      }
   };
How to display children of a specific parent on change of dropdown from a json in angularjs

How to display children of a specific parent on change of dropdown from a json in angularjs


By : leo_corder
Date : March 29 2020, 07:55 AM
Any of those help Instead on putting the ng-repeat in options tag, use ng-options to display data.
Try this.
code :
var BaseApp = angular.module('myApp', ['ngResource']);

BaseApp.run(function($rootScope) {

})

BaseApp.controller("myCtrl", function($scope) {

  $scope.records = [{
        "project_id": "1001",
        "project_name": "Project1",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager1",
        "duration": "3 Years",
        "team_size": "10",
        "sublink": ["Project1a", "Project1b", "Project1c", "Project1d", "Project1e"]
    },
    {
        "project_id": "1002",
        "project_name": "Project2",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager2",
        "duration": "5 Years",
        "team_size": "12",
        "sublink": ["Project2a", "Project2b", "Project2c", "Project2d", "Project2e"]
    },
    {
        "project_id": "1003",
        "project_name": "Project3",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager3",
        "duration": "4 Years",
        "team_size": "1",
        "sublink": ["Project3a", "Project3b", "Project3c", "Project3d", "Project3e"]
    },
    {
        "project_id": "1004",
        "project_name": "Project4",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager4",
        "duration": "6 Years",
        "team_size": "30",
        "sublink": ["Project4a", "Project4b", "Project4c", "Project4d", "Project4e"]
    },
    {
        "project_id": "1005",
        "project_name": "Project5",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager5",
        "duration": "5 Years",
        "team_size": "23",
        "sublink": ["Project5a", "Project5b", "Project5c", "Project5d", "Project5e"]
    },
    {
        "project_id": "1006",
        "project_name": "Project6",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager6",
        "duration": "3 Years",
        "team_size": "12",
        "sublink": ["Project6a", "Project6b", "Project6c", "Project6d", "Project6e"]
    },
    {
        "project_id": "1007",
        "project_name": "Project7",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager7",
        "duration": "3 Years",
        "team_size": "65",
        "sublink": ["Project7a", "Project7b", "Project7c", "Project7d", "Project7e"]
    },
    {
        "project_id": "1008",
        "project_name": "Project8",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager8",
        "duration": "7 Years",
        "team_size": "25",
        "sublink": ["Project8a", "Project8b", "Project8c", "Project8d", "Project8e"]
    }];
    

$scope.chanData = function() {

        //console.log($scope.popData);
    };

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.0.5/angular-resource.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-options="x as x.project_name for x in records"  ng-change="chanData()" ng-model="popData" >
  <option value="">Select Account</option>
  </select>

  <p>{{popData.sublink}}</p>
  
</div>
Related Posts Related Posts :
  • Why are my Angular, absolute path, URL's not compiling properly with Closure Compiler?
  • AngularJS routing not working properly in PhoneGap
  • AngularJS: Create new scope variable name using a variable value
  • Directive scope update does not update controller scope (AngularJs)
  • Unit-test a angular controller function in a directive
  • jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive
  • AngularJS determine filter in controller
  • How to deploy an app using ionic framework to Amazon? (elastic beanstalk prefered)
  • Conditional injection of a service in AngularJS
  • Filtering on object properties not working
  • Open $modal from the service and pass variables to the controller
  • ngClick evaluated against scope instead of isolateScope
  • onEnter and onExit are not called when state is left/activated in angularjs ui router
  • Shared client & server modules with angularjs and pongular
  • Getting the angular app to run when using protractor
  • Angularjs: create a link for download different types of file
  • Angular HTML5 mode, Wordpress, Rewrites, Apache and You
  • Using angular js form validations in <form:input> tag
  • AngularJS call common functions in a directive template
  • AngularJS Promise resolved incorrectly
  • properly clearing whole AngularJS ui-grid chart
  • Can not figure out how to store $rootScope in angular.bootstrap
  • animate.css animation within angularjs 1.3 using ngAnimate gives different animations in Firefox
  • Auth0 IE Issue: Unable to get property 'frames' of undefined or null reference
  • Am I misusing directives with too much logic?
  • Use an Angular JS value as a parameter of TWIG "path" function in Symfony 2
  • multiple function on ng-click angularjs
  • Converting $.ajax call to $http call in angular 404 error
  • Angularjs templateUrl file location not found
  • How to execute the function after change page in angularjs?
  • Pass variable to AngularJS directive without isolated scope
  • OAuth, Custom Login, or Both
  • Angular Directive: Isolate Scope & Transclude is true, but HTML in the directive needs to continue to bind to parent
  • Compare objects in angularjs
  • Combine "Checkbox" & "Avatar" in an Ionic Framework List
  • Issue with the Angular UI router when inheriting from a parent state
  • Is there a way to initialize an Angular Service without DI into controller
  • Why is a parent controller's $scope not accessible from a (child) directive?
  • How to get back button in Ion-tabs page
  • AngularJS bind class attribute to model
  • How can I get AngularJS ui-router to respond correctly to a browser page refresh?
  • Angular validation does not work
  • Breez Create Complex Entities
  • Drag and drop using protractor in dthmlx component
  • In Angular JS, what is the default 'cache' value that is used when sending request with $http service?
  • How to change placeholder for single textbox in angular?
  • $ is not defined - jquery angular mixing
  • CORS issue angularjs and spring security
  • Angularjs cannot select last item in dropdown the first time
  • Angularjs - $watch issue
  • On change radio button to no the span should hide in angular
  • Creating a wordcloud generator in Angularjs
  • Angular UI Bootstrap collapse - whats wrong?
  • AngularJS after redirect from app to app, the default page is not loading
  • Why does my scope update my factory and my factory update my scope when it should not?
  • AngularJS testing $httpBackend.whenGET().respond() not working with number as parameter
  • Setting up Login in Angular App
  • Retrieve value that is stored in db and display in select box using angularjs and laravel
  • Binding nested array in Angular view
  • Using filter with geojson, right direction?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org