logo
Tags down

shadow

Disable selected option from drop down One to drop down Two in angular 2 - Material


By : Alex Yang
Date : October 14 2020, 02:15 PM
Does that help , In your 2nd drop down you can write like
code :
<div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
        <mat-select placeholder="select" 
                    [(ngModel)]="oppurtinityTwo" 
                    [disabled]="selectedRankingCriteria.viewValue!=='Custom'">
            <mat-option *ngFor="let op of OppurtunityList" 
                        [value]="op" 
                        [disabled]="oppurtunityOne.viewValue === op.viewValue">
                {{op.viewValue}}
            </mat-option>
        </mat-select>
    </mat-form-field>
</div>


Share : facebook icon twitter icon

Enable/disable of textbox on option selected from drop down menu


By : user2822017
Date : March 29 2020, 07:55 AM
this will help What I want is that the text box is only accessible if a certain option is picked from the drop down menu and I have an html form as below: , You should call the javascript function for this.
code :
<select id="mfi_4_a_i" name="mfi_4_a_i" onChange="changetextbox();">
    <option>Yes</option>
    <option>No</option>
    <option>No, but planning in future</option>
</select>

<input type="text" name="mfi_4_a_ii" id="sdd" />

<script type="text/javascript">
function changetextbox()
{
    if (document.getElementById("mfi_4_a_i").value === "noy") {
        document.getElementById("sdd").disable='true';
    } else {
        document.getElementById("sdd").disable='false';
    }
}
</script>

Rails Cascading Drop Down List: Change Drop down menu into Text Field based on Previous Drop Down Option Selected


By : Muhammad Dhifal
Date : March 29 2020, 07:55 AM
will help you I would recommend to add both Text Field and State dropdown initially and toggle them depending on Country value.
code :
<%= f.label :state,'State', class:"control-label" , style: "color: black;"%>
<%= f.select( :state, options_for_select(us_states), {}, {class: "form-control"}) %>
<%= f.text_field :state,'', class: "form-control",:style=>"display:none"%>
<script type='text/javascript'>
    $("#country_drop_down_id").change(function(){
    if($(this).val()=='US'){
       $('#state_drop_down_id').show();
       $('#state_text_field_id').hide();
    }else{
       $('#state_drop_down_id').hide();
       $('#state_text_field_id').show();
    }
    });
 </script>

Disable selected drop down option angular 2?


By : VSK
Date : March 29 2020, 07:55 AM
Hope that helps TS FILE , You can create a pipe that filters already selected data.
code :
import { PipeTransform, Pipe } from '@angular/core';

@Pipe({
  name: 'cityFilter',
  pure: false
})
export class CityFilterPipe implements PipeTransform {
  transform(items: any[], selectedItems: any[]): any {
    return items.filter(item => selectedItems.indexOf(item) < 0);
  }
}
<form #myForm="ngForm">
    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectOne" name="selectOne">
                <mat-option *ngFor="let time1 of resData.data" [value]="time1">{{time1}}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>

    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectTwo" name="selectTwo">
                <mat-option *ngFor="let time2 of resData.data | cityFilter:[selectOne]" [value]="time2">{{time2}}         </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectThree" name="selectThree">
                <mat-option *ngFor="let time3 of resData.data | cityFilter:[selectOne,selectTwo]" [value]="time3">{{time3}}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectFour" name="selectFour">
                <mat-option *ngFor="let time4 of resData.data| cityFilter:[selectOne,selectTwo, selectThree]" [value]="time4">{{time4}}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
<form>

Disable already selected option in dynamically added drop down


By : user3178871
Date : March 29 2020, 07:55 AM
wish help you to fix your issue You can add trigger a function that defines change event each time a row is added, also after the row is added you can call the disabling logic:
code :
var selected = [];

triggerOnChangeDef();

function triggerOnChangeDef() {
  $('.disabled-select').on('change', function(event, params) {
    if (typeof params != 'undefined') {
      $(this).data('selected', params.selected);
      $('option').prop('disabled', false);
      $('.disabled-select').each(function() {
        var val = this.value;
        if (val != "" && selected.indexOf(val) == -1)
          selected.push(val);
        $('.disabled-select').not(this).find('option').filter(function() {
          return selected.indexOf(this.value) > -1;
        }).prop('disabled', true);
      });
      $('.disabled-select').chosen().trigger("chosen:updated");
    } else {
      var data = $(this).data("selected");
      //console.log(data);
      if (data) {
        selected.splice(selected.indexOf(data), 1);
        disableOptions();
        $(this).data("selected", null);
      }
    }
  });
}

function disableOptions() {
  $('option').prop('disabled', false);
  $('.disabled-select').each(function() {
    $('.disabled-select').not(this).find('option').filter(function() {
      return selected.indexOf(this.value) > -1;
    }).prop('disabled', true);
  });
  $('.disabled-select').chosen().trigger("chosen:updated");
}

var addMRow = '<div class="row">' +
  '            <div class="col-md-4">' +
  '                <select data-placeholder="Choose a Country..." id="1" class="chosen-select-deselect disabled-select" tabindex="1">' +
  '                    <option value=""></option>' +
  '                    <option value="United States">United States</option>' +
  '                    <option value="United Kingdom">United Kingdom</option>' +
  '                    <option value="Afghanistan">Afghanistan</option>' +
  '                    <option value="Aland Islands">Aland Islands</option>' +
  '                    <option value="Albania">Albania</option>' +
  '                    <option value="Algeria">Algeria</option>' +
  '                </select>' +
  '            </div>' +
  '            <div class="col-md-4">' +
  '                <select data-placeholder="Choose a Country..." id="1" class="chosen-select-deselect disabled-select" tabindex="1">' +
  '                    <option value=""></option>' +
  '                    <option value="United States">United States</option>' +
  '                    <option value="United Kingdom">United Kingdom</option>' +
  '                    <option value="Afghanistan">Afghanistan</option>' +
  '                    <option value="Aland Islands">Aland Islands</option>' +
  '                    <option value="Albania">Albania</option>' +
  '                    <option value="Algeria">Algeria</option>' +
  '                </select>' +
  '            </div>' +
  '            <div class="col-md-4">' +
  '                <select data-placeholder="Choose a Country..." id="1" class="chosen-select-deselect disabled-select" tabindex="1">' +
  '                    <option value=""></option>' +
  '                    <option value="United States">United States</option>' +
  '                    <option value="United Kingdom">United Kingdom</option>' +
  '                    <option value="Afghanistan">Afghanistan</option>' +
  '                    <option value="Aland Islands">Aland Islands</option>' +
  '                    <option value="Albania">Albania</option>' +
  '                    <option value="Algeria">Algeria</option>' +
  '                </select>' +
  '            </div>' +
  '        </div>';



$('.addRow').click(function() {
  $(this).after(addMRow);
  $('.chosen-select-deselect').chosen({
    allow_single_deselect: true
  });
  disableOptions();
  triggerOnChangeDef();
});

/*----------------working code--------------------*/
.chosen-select-deselect {
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://harvesthq.github.io/chosen/chosen.css" />


<div class="container">
  <div class="row">
    <div class="col-md-4">
      <select data-placeholder="Choose a Country..." id="1" class="chosen-select-deselect disabled-select" tabindex="1">
        <option value=""></option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Aland Islands">Aland Islands</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
      </select>
    </div>
    <div class="col-md-4">
      <select data-placeholder="Choose a Country..." id="1" class="chosen-select-deselect disabled-select" tabindex="1">
        <option value=""></option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Aland Islands">Aland Islands</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
      </select>
    </div>
    <div class="col-md-4">
      <select data-placeholder="Choose a Country..." id="1" class="chosen-select-deselect disabled-select" tabindex="1">
        <option value=""></option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Aland Islands">Aland Islands</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <a href="javascript:void(0);" class="addRow">Add more</a>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<script src="https://harvesthq.github.io/chosen/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="https://harvesthq.github.io/chosen/docsupport/init.js" type="text/javascript" charset="utf-8"></script>

Make a specific option disappear in the second drop down based on the selected option in the first drop down


By : Tee S
Date : March 29 2020, 07:55 AM
Does that help I am creating a two drop down list that has same value. The first drop down is Flight_From and the second drop down is Flight_To, every time the user clicks an option from the first drop down (Flight_From), the second dropdown (Flight_To) should disable or hide the same value that is currently selected from the first drop down. , You may use
code :
$('#flyingFromDropDownId').change(function() {        
    value = this.value;
    $("#flyingToDropDownId option[value!='" + value + "']").show();
    $("#flyingToDropDownId option[value='" + value + "']").hide();                                               
});
Related Posts Related Posts :
  • Angular 2 routing with map
  • Length of observable array using 'as' syntax
  • Angular 6, directive ngOnChanges does not work with a lambda expression?
  • Angular animation jumps to undesired value upon completion
  • Inject a service with constructor in the main.ts
  • Angular Material Flex Layout - center aligning menu buttons
  • Http-Get-Function seems to be called multiple times in one call and always returns an empty array
  • VSCode Debugger Just sits there and does nothing
  • How to get file name instead of path with ngModel and ng2-file-upload?
  • Angular7 Form Validation on button push or property not in html
  • Highcharts triangle (or any type of marker pointer) in stacked bars
  • S3 Bucket referencing old code/api? Angular 5
  • ngModel kills output with white screen
  • Index does not load in ngFor Angular 2+
  • angular: How to change an imported component's class to change color?
  • Angular Http Caching and Race Conditions
  • Angular 6, how to update angular input field while looping?
  • How can I get html elements classes inside Angular Component?
  • Angular 6: How to use FormGroup to create formControlName dynamically?
  • # base routing is not working in angular 6
  • DXpopup position offset top relative to a variable
  • Angular 5 Material Multi-level Carousel style SideNav Menu (no dropdown)
  • Get the latest accumulated result of a scan instead of repeating it?
  • Angular redux @effect: Error on retriving the payload
  • Angular - add new row to mat-table when using FormControlArray as dataSource
  • Access to fetch at 'https://api.kendozone.com/auth/login' from origin[...] has been blocked by CORS policy
  • Can I use the component of One Application into another Application?
  • How to change date format in ngbDatepicker input field in angular bootstrap?
  • Warning messages are displaying even after the data present in the input field
  • ArrayBuffer as source (image tag) / Display image from Blob
  • How can I install highcharts-angular *and* highcharts?
  • How can I debounce this Angular 7 async validator that uses combineLatest internally?
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org