I have the following json
[{"name":"Male","code":"1"},{"name":"Female","code":"2"}]
<label id="labelPersonalInformationExtra" class="item item-input item-stacked-label">
<span id="inputLabel" class="input-label">Gender</span>
<select id="dropDownPersonalDetails" ng-options="gender.name for gender in genders" ng-model="gender" ng-change="updateGender(gender)" >
<option style="display:none;" value="" disabled>{{genderPlaceholder}}</option>
</select>
</label>
What I wanted to do is have the placeholder to show the last option they chose but what happens is that the value becomes duplicated. If their last selected choice was female. The drop down would show as:
Female
Female
Male
How do I point their selected value to a value in my json so the drop down shows directly that.
Added option for placeholder will remain as is, you can't remove it dynamically. I'd rather prefer to give a generic text to placeholder of select like Select a gender. And then for preselected Female option you could do $scope.gender = $scope.genders[1] inside your controller.
Markup
<label id="labelPersonalInformationExtra"
class="item item-input item-stacked-label">
<span id="inputLabel" class="input-label">Gender</span>
<select id="dropDownPersonalDetails" ng-model="gender"
ng-change="updateGender(gender)"
ng-options="gender.name for gender in genders">
<option value="" disabled>Select a gender</option>
</select>
</label>
Demo Plunker
Related
I want to apply required on certain conditions. I used the [required]= "condition" but didn't work
Here I want to apply required attribute when outlookName.outlookActionName==='Assigned' where outlook name is a dropdown and assigned is one of the value in the dropdown
<select
class="form-control"
required
name="ratingOutlook"
[(ngModel)]="ratingOutlook"
>
<option
*ngFor="let outlookName of searchCriteriaForm?.outlookDetails,index as i"
[value]="outlookName.outlookId"
>{{outlookName.outlookName}}</option
>
</select>
<div class="form-group" *ngIf="outlookCheck">
<label for="outlookFromDate">Outlook: From Date</label>
<input
class="form-control"
autocomplete="off"
name="outlookFromDate"
type="text"
required
placeholder=""
#dp="bsDatepicker"
bsDatepicker
[(ngModel)]="outlookFromDate"
[bsConfig]="{ dateInputFormat: 'DD-MMM-YYYY',showWeekNumbers: false ,containerClass: colorTheme }"
(ngModelChange)="validateOutlookDate()"
/>
</div>
Please try [attr.required]="yourBooleanVariable"
I added some new choices to my Select Menu and now JQM changed the "pop-up" behavior to a new window with a black background along with the menu choices?
I'm OK with the new window, but now my custom JavaScript code is no longer triggered because of the new JQM pop-up window?
Here's my Select Menu code:
<div data-role="fieldcontain">
<label for="ttType">Work-Order Type:<span class="required">*</span></label>
<select name="ttType" id="ttType" data-native-menu="true" data-mini="true" data-theme="d">
<cfoutput query="rsType" group="ttOption">
<optgroup label="#ttOption#">
<cfoutput>
<option value="#ttDesc#">#ttDesc#</option>
</cfoutput>
</optgroup>
</cfoutput>
</select>
</div>
Here's the field that no longer works:
<div data-role="fieldcontain">
<label for="ttEscalate">Escalation:<span class="required">*</span></label>
<input name="ttEscalate" type="text" id="ttEscalate" value="" readonly="readonly"
wdg:subtype="N1DependentField" data-mini="true" wdg:type="widget"
wdg:recordset="rsType" wdg:valuefield="ttDefEsc" wdg:pkey="ttDesc"
wdg:triggerobject="ttType"/>
</div>
<div data-role="fieldcontain">
Basically, when the "Select Type" value changes, I automatically fill in the Escalation text field with a "related value"
How do I stop JQM from defaulting to that black window? I'd prefer to just have the select drop-down stay on the same page.
PS: If I change the data-native-menu back to false, everything works fine, but I lose all the nice JQM formatting!
I want to assign value to a variable when a user picks a choice in a dropdown in Odoo 11 Web Template. So when a user has done clicking the dropdown then a value will be assigned with a value accordance to user pick
<div class="col-md-3 col-sm-3">
<select class="form-control" id="university_id" name="university_id">
<t t-foreach="universities" t-as="university">
<option t-att-value="university.id"><t t-esc="university.name"/><t set="var_univ" t-value="university.name"/></option>
</t>
</select>
</div>
I want to set a value in var_univ variable with the name of the university. How can I achieve this?
please try with following :
<div class="col-md-3 col-sm-3">
<select class="form-control" id="university_id" name="var_univ">
<t t-foreach="universities" t-as="university">
<option t-att-value="university.name">
<t t-esc="university.name"/>
</option>
</t>
</select>
</div>
Make sure above div tag is in Form View with action.
Thanks !
I am showing a simple drop down from list of string. I always have an empty dropdown option available even if i do't want to have it. As shown in image
//predefined values for brandingSpaceType
private brandingSpaceTypeValues: string[] = ["Mobile Shop", "Supermarket",
"Shop In Shop", "Shop On Wheel", "Kiosk", "Others"]
private selectedBrandingSpaceType: string = this.brandingSpaceTypeValues[2];
And here is html
<div class="field">
<select class="form-control" [(ngModel)]="selectUndefinedOptionValue"
name="brandingSpaceType" [disabled]="brandingSpaceTypeStatus.readonly">
<option [selected]="selectedBrandingSpaceType == x" *ngFor="let x of
brandingSpaceTypeValues" [value]="x">{{x}}<option>
</select>{{selectUndefinedOptionValue}}
</div>
Problem is in your html. You have to close your option tag properly like</option>
<option [selected]="selectedBrandingSpaceType == x" *ngFor="let x of
brandingSpaceTypeValues" [value]="x">{{x}}</option>
Try this it will definitely solve your problem.
Just add this to your select
<option disabled hidden style='display: none' value=''></option>
disabled makes option unclickable.
style='display: none' to not displayed in older browsers.
<div class="field">
<select class="form-control" [(ngModel)]="selectUndefinedOptionValue"
name="brandingSpaceType" [disabled]="brandingSpaceTypeStatus.readonly">
<option disabled hidden style='display: none' value=''></option>
<option [selected]="selectedBrandingSpaceType == x" *ngFor="let x of
brandingSpaceTypeValues" [value]="x">{{x}}<option>
</select>{{selectUndefinedOptionValue}}
</div>
I am getting started with JQueryMobile and love it. I am wondering if there is a way to place a prepended a select menu beside a standard text input.
For example, if the text input were to be for a name, then the prepended select would contain Mr, Mrs, etc.
Edit 1:
I've looked at the control group docs and for a case like buttons it works e.g.
<div data-role="controlgroup" data-type="horizontal">
Icon only
Icon only
</div>
However if I use an input like
<div data-role="controlgroup" data-type="horizontal">
Icon only
<input type = "text" name = "some_input" id = "some_input">
</div>
It gives a weird result with the input overlapping the button.
Edit 2:
I've looked at grids but cannot see a way to have a div span 2 grids. e.g.
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b ui-block-c">Block C</div>
</div>
I've tried the above, but it doesn't work as desired, for example
<div class="ui-grid-c">
<div class="ui-block-a">
<label for = "full_name">
Name
<select id = "honorific" data-mini="true" data-inline="true">
<option value = "mr">Mr</option>
<option value = "mrs">Mrs</option>
<option value = "miss">Miss</option>
</select>
</label>
</div>
<div class="ui-block-b ui-block-c ui-block-d">
<input type="tel" data-clear-btn="true" id = "full_name" name = "full_name">
</div>
</div>
simply yeilds the select box below the full name label, and the input only spans what appears to be one cell/block - rather than the 3 cells/blocks of the grid.
From what I've seen control group works best with buttons, check boxes, etc. Not with the combination you're expecting to do. So here are two solutions for you.
Without using grids
You'll just have to make the two elements as an inline-block, like this :
.ui-select, .ui-input-text {
display:inline-block
}
Demo with No grids, No control group.
Using grids
The way you're using grids is wrong. You'll have to use two-column grid, which will have these two two classes alone: ui-block-a & ui-block-b, like this :
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
</div>
This will scale your markup accordingly. Here's how the HTML looks like :
<div class="ui-grid-a">
<div class="ui-block-a" style="width:100px">
<select name="select-choice-min" id="select-choice-min" data-mini="true">
<option>Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>
</select>
</div>
<div class="ui-block-b">
<input type="text" name="name" id="name" value="" placeholder="Enter Name" />
</div>
</div>
Demo with grids