Develop Reference

Select option not display value selected during edit mode in angular

I have this select option code, but when editing the form, the selected value is not displaying automatically. How can i make the selected value display when editing the form
HTML CODE
<div class="form-group row">
<label class="col-md-12 label-control">{{'Type of Leave' | translate}} <span class="danger"> *</span></label>
<div class="col-md-12" >
<select class="form-control" id="allLeaveType" name="allLeaveType" [(ngModel)]="leaveList.selectedLeaveType" [disabled]="isDisabled1" (change)="getSelectedLeave(leaveList.selectedLeaveType)" >
<option value="undefined" disabled selected hidden >{{'Leave Type' | translate}} </option>
<option *ngFor="let data of allLeaveType" [ngValue]="data">{{data.type}}</option>
</select>
</div>
</div>
DISPLAY DURING CREATE MODE
DISPLAY DURING EDIT MODE
How can i display the selected value i.e. selected leave type to display automatically during edit mode. Thanks
I WANT TO DISPLAY THIS DURING EDIT MODE BASED ON VALUE SELECTED WHEN CREATING THE FORM, Thanks

Different classes in different display sizes

I want class 'myclass' and 'col-3' only to be applied in lg size. In other cases I want only 'col'. How to do that?
I can do that:
<div class="d-none d-lg-block">
<div class="myclass col-3">
<select id="country-select">
<option value="">All</option>
<option value="FIN">Finland</option>
<option value="CAN">Canada</option>
</select>
</div>
</div>
<div class="d-block d-lg-none">
<div class="col">
<select id="country-select">
<option value="">All</option>
<option value="FIN">Finland</option>
<option value="CAN">Canada</option>
</select>
</div>
</div>
But there is a problem that I have two select forms with the same id 'country-select' and my jquery functions don't work correctly. I need the solution with only one select form with id ='country-select'.
I don't want to send data from select forms to server, so I don't need 'name' attribute. I need to use $("#country-select").val() in jquery code, but there is a problem I have two select forms with id ='country-select' in my solution.

Based on your condition for adding or removing class, you can use jquery:
$('.className').addClass('lg-size-class');
$('.className').removeClass('lg-size-class');
Note that id attribute should have a unique value when using it.

bootstrap multiselect dropdown+disable uncheck for particular option

How I can disable uncheck option from the bootstrap multi-select drop-down, actually on load some option by default is checked and I want those options not to be unchecked. Below I am providing an image for better understanding.
! [Link for the sample image] 1
From the above image those three is by default checked while page load and now I don't want to be unchecked those three (Cheese, Tomatoes, Mozzarella)
Below I am providing the link of the above requirement.
Link to the sample code
Thanks

You can just simply add disabled (and selected) attributes to the options which you want to keep selected.
<div class="form-group">
<label class="col-md-4 control-label" for="rolename">Role Name</label>
<div class="col-md-4">
<select id="dates-field2" class="multiselect-ui form-control" multiple="multiple">
<option value="cheese" disabled selected>Cheese</option>
<option value="tomatoes" disabled selected>Tomatoes</option>
<option value="mozarella" disabled selected>Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
</div>
It's important that you only initialize the multiselect after you have set the attributes

Data not binding properly in angular in list box

I am using the below to code to get data in a list box.
<div class="form-group">
<label class="control-label col-md-6">Year Built</label>
<div class="col-md-6">
<select ng-model="property.yearBuilt"
id="yearBuilt"
rb-default-year="currentYear"
ng-options="year.yearFourDigit as year.yearFourDigit for year in years">
<option value="">--Select--</option>
</select>
</div>
</div>
But somoehow the data is not binding properly with html. I am getting blank list box 50% of the times.
Can anyone please help me in this?
I wanted to post a picture showing what I am seeing, but I don't have a 10 in reputation to be able to do that.

Jquery mobile flipswitch toggle for gender (like Tinder)

I am working on an app that will have a setting page where the user can use the flip toggle to select the gender. The flip toggle consist of male (on off)and female (on off). Depending of the selection, an ul list will display with gender preference. I am struggling trying to find a solution with PHP or JQuery/JavaScript. Any code solution from you guys?
The HTML5 code:
<div data-role="page" id="page-settings" class="page-panel">
<div data-role="content" id="settingsPanel">
<div data-role="fieldcontain" id="menSelector" >
<label for="flip-1">Men</label>
<select name="flip-1" id="flip-1" data-role="slider"data-mini="true">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
<div data-role="fieldcontain" id="womenSelector" >
<label for="flip-2">Women</label>
<select name="flip-2" id="flip-2" data-role="slider"data-mini="true">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
The -ul -li list is appending from database +item.Gender+ with values : female or male.
Any help will be very appreciated since I have been searching foo three days with no success.