Using Twitter Boostrap, I'm trying to create a form dropdown with dividers within the dropdown, corresponding to each section. Is that possible?
JSFiddle included
I'd like to create something like:
<!--GROUP-->
<option>1</option>
<option>2</option>
<option>3</option>
<!--GROUP-->
<option>4</option>
<option>5</option>
<option>6</option>
To achieve this, you could use optgroup
<div class="container">
<select>
<optgroup label="Group 1">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
<optgroup label="Group 2">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
</select>
</diV>
Updated fiddle: http://jsfiddle.net/codovations/M8pSH/
Related
I have a form that has input fields and and some select dropdowns. All the input fields are being populated correctly from the input object, but the dropdowns are not being selected to the correct value, and always have a blank option first.
This is what the template looks like:
<div class="form-group">
<label for="state">State:</label>
<select class="form-control formField" id="state" required [(ngModel)]="user.state" name="state">
<option *ngFor="let state of states" [ngValue]="state">{{state}}</option>
</select>
</div>
I cant figure out what I am missing.
user.state is a string that contains a 2-letter state abbreviation.
States is an array of US states using 2-letter abbreviation.
The best way I've found is as follows:
<div class="form-group">
<label for="state">State:</label>
<select class="form-control formField" id="state" required [(ngModel)]="user.state" name="state">
<option [ngValue]="undefined" disabled selected>Select a State</option>
<option *ngFor="let state of states" [ngValue]="state">{{state}}</option>
</select>
The disabled attribute does not allow that option to be selected from the dropdown. Hope this helps.
I'm trying to have a TYPO3 request form that is called from a simple link with a parameter, e.g.
request
The TYPO3 form has a select box with some options:
<select id="field-10" name="tx_form[Product-line]">
<option value="11">Product 1</option>
<option value="12">Product 2</option>
<option value="13">Product 3</option>
</select>
How can I preselect the option with a get parameter here?
What would be the best way to do the following:
A drop-down list with COUNTRYies. The list of countries are in json format, retrieved from a web service.
Show or pre-fill the STATE dropdown based on Country selection.
This looks to be a standard requirement but was not able to find a proper solution.
What we have done as of now if using Sightly, make a call to get the Country list in a json and populate, and based on selection show STATES(for USA) or PROVINCES(for Canada) and doing Show/Hide. But was looking for better alternatives.
<!-- COUNTRY -->
<select class="myContactFieldSelect" id="companyCountry" tabindex="22" name="countryID">
<option value="">Please Select</option>
<div data-sly-list.country="${jHelper.pJSON.countryList}" data-sly-unwrap>
<option value="${jHelper.pJSON.countryList[country].countryID # context='html'}">
${jsonHelper.parsedJSON.countryList[country].countryLongName # context='html'}
</option>
</div>
</select>
<!-- STATES or PROVINCES -->
<select class="myContactFieldSelect" id="companyState" tabindex="20" name="stateLongName" style="display: none;">
<option selected="selected" value="">Please Select</option>
<div data-sly-list.state="${jHelper.pJSON.stateListUS}" data-sly-unwrap>
<option>${jHelper.pJSON.stateListUS[state].stateLongName # context='html'}</option>
</div>
</select>
<!-- OR -->
<select class="myContactFieldSelect" id="companyProvince" tabindex="21" name="provinceLongName" style="display: none;">
<option selected="selected" value="">Please Select</option>
<div data-sly-list.province="${jHelper.pJSON.stateListCA}" data-sly-unwrap>
<option>${jHelper.pJSON.stateListCA[province].stateLongName # context='html'}</option>
</div>
</select>
My solution will be:
Manage Country/City hierarchy in Taxonomy
Create a Json from taxonomy for Country-City
Use Javascript to read Json and populate correct city for country
Above solution can be enhanced by pre-populating country/city based on user geolocation.
I have a form with 3 lists like this and I need every time one of the lists change put the others in cero 0, I need this in prototype or pure Javascript
<select id="1" onchange="resetall()">
<option value="0">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="2" onchange="resetall()">
<option value="0">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="3" onchange="resetall()">
<option value="0">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
thanks.
Here's a working demo using Prototype
Basically, it finds all select elements with the class resetOthers, and listens for the onchange event (don't use the onchange HTML attribute - it's cleaner to add the JavaScript behavior via JavaScript once the page has loaded).
When a select changes, it loops through the select elements, and sets each to the value of the first option (except for the one that triggered the event, of course).
<select name="day" id="day">
<option value="0" label="Day:">Day:</option>
<option value="1" label="1">1</option>
</select>
<select name="month" id="month">
<option value="0" label="Month:">Month:</option>
<option value="1" label="January">January</option>
</select>
<select name="year" id="year">
<option value="2010" label="2010">2010</option>
</select>
Can I build a form part like this format using Zend_Form and Decorator? I have read many posting but couldn't find any which helps to pack more than one elements together inside a "dd" tag. Does it possible or not?
http://weierophinney.net/matthew/archives/217-Creating-composite-elements.html
This post goes onto explain how to create a composite object using Zend_Form_element and settings up custom decorators.
It is also built around having all date fields grouped together so you could probably just modify this example to get what you want.