jFormer Documentation → Basic Fields →
Drop-Down
JFormComponentDropDown(String id, String label, Array dropDownOptionArray[, Array optionArray])
The Drop-Down field presents choices to the user in a drop down list format. This is best used when there are many options to choose from, such as a list of states or countries.
Usage
Constructor
new JFormComponentDropDown(String id, String label, Array dropDownOptionArray[, Array optionArray])
Sample Usage
Create a simple drop down component with a tooltip:
$dropDown = new JFormComponentDropDown('id', 'Label:',
array(
array(
'value' => '',
'label' => ' - Select an Option - ',
'disabled' => true,
'selected' => true
),
array(
'value' => 'option1',
'label' => 'Option 1'
),
array(
'value' => 'option2',
'label' => 'Option 2'
),
),
array(
'tip' => 'This is a tooltip on a drop down component.
',
)
);
Value Returned
String
CSS Class
.jFormComponentDropDown
Drop-Down Option Array
The Drop-Down option array is an array of arrays that sets the value labels and attributes of each of the options within the dropdown. it has the following key/value pairs see the example above for a usage example.
- value => string
- label => string
- disabled => boolean
- selected => (accepts either the string 'selected' or null, if it not set to 'selected', it will not work, will be normalized to boolean in later versions.)
Drop-Down Options
These options are specific to the JFormComponentDropDown object.
false
disabled
boolean | determines whether or not the drop down field is disabled. A disabled drop-down list is unusable and un-clickable.
false
multiple
boolean | determines whether or not multiple options can be selected at the same time. Selecting multiple options vary in different operating systems and browsers:
- For Windows: Hold down the control (ctrl) button to select multiple options
- For Mac: Hold down the command button to select multiple options
Because of the different ways of doing this, and because you have to inform the user that multiple selection is available, it is more user-friendly to use checkboxes instead.
The multiple attribute can be used together with the size attribute to define the number of options to be displayed.
null
size
integer | determines the number of visible options in a drop-down list. (only applies when multiple is true)
Component Options
These options are common to all components.
null
description
HTML | a description for the component, shows underneath the component inside a DIV with the class jFormComponenpescription.
null
instanceOptions
Array, [max(int), addButtonText(string), removeButtonText(text)] | see instanceOptions page for more information.
null
dependencyOptions
Array, [dependentOn(string), display(string), jsFunction(Javascript)[, animationOptions(array)]] | see dependencyOptions page for more information.
null
tip
HTML | a tooltip that displays whenever the component has focus. Gives any extra help or explanation a form user might need.
null
validationOptions
Array | an of validations specific to the component, see the specific component for its validations.
false
showErrorTipOnce
Boolean | this option makes the error tip only show up on the first focus on the component if it does not pass validation.
false
enterSubmits
Boolean | if true pressing enter while this component has focus submits the form, or advances to the next page.
null
style
CSS | set the style attribute for the component wrapper div.
null
initialValue
String | preset the value of the component upon form loading.
Drop Down Validation Options
| Name | Error Message and Description |
| required |
"required." The 'required' validation makes sure that there is a value selected.
'validationOptions' => array('required'),
|
Next Page: File
This page was last edited on April 25, 2011 at 9:00am.
10 comments (add a comment)
After reading the jFormer source code, I found that the drop down option array also supports grouping items together via optGroup. Simply add the following to each dropdown item array specifying the group that it is apart of:
new JFormComponentDropDown('viewSelector', 'Leagues:',
array(
array(
'value' => '',
'label' => ' - Select a Type - ',
'disabled' => true,
'selected' => true
),
array(
'value' => 'option1',
'label' => 'Option 1',
'optGroup' => 'Opt Group 1',
),
array(
'value' => 'option2',
'label' => 'Option 2',
'optGroup' => 'Opt Group 1',
),
),
After reading the jFormer source code, I found that the drop down option array also supports grouping items together via optGroup. Simply add the following to each dropdown item array specifying the group that it is apart of:
'optGroup' => 'Opt Group 1',
How do you set initialValue for dropdown?
Easiest Way:
new JFormerComponentDropDown('id', 'label:', array(array('value' => 'Val', 'label' => 'Label:', 'selected' => true)))
SethZJensen on 2011-11-11 14:45:43
@user,
In your array of dropdown options, set the desired one with an option of 'selected' => true
see CK above.
Francesco Dimech on 2011-12-18 08:53:20
I would like to set several fields in my option to get an amount of fields from a database. I usually did the following:
$query2 = "SELECT * FROM subjects";
$result = $db->query($query2);
form method="post" action="addquiz.php" onsubmit="return validatequiz()">
<ul style="list-style-type:none">
<li><label for="subjectname">Select Subject: </label>
<select id="subjectname" name="subjectname">
<?php
while($row = mysql_fetch_array($result))
{
?>
<option value="<?php echo $row["subjectid"];?>"><?php echo $row["subjectname"];?> </option>
<?php
}
?>
</select></li>
<li><input type="submit" value="Add Quiz" /></li>
</ul>
</form>
What do I have to do in this form to get such results from a database instead of manually inputted them one by one?
Please respond ASAP! Thanks!
Francesco Dimech on 2011-12-20 15:04:04
so, after loads of hours learning how this works I've concluded the following which works:
Select the data you want from the database and insert it into an array using the following technique:
$query = "SELECT * FROM usertype";
$resultset = $db->query($query);
$innerarray = array();
array_push($innerarray, array ('value' => '','label' => ' - Select an Option - ','disabled' => true,'selected' => true,));
while ($row = mysql_fetch_array($resultset))
{
array_push($innerarray, array ('value' => $row["usertypeid"], 'label' => $row["usertype"],));
}
Then in the AddFormComponents Array, simply add a dropdown list as so:
new JFormComponentDropDown('usertype', 'User Type:', $innerarray,
array(
'validationOptions' => array('required')
),
array(
'tip' => '<p>Select User Access.</p>',
)),
Hope it helps someone :)
thanks to Francesco Dimech, your comment helps me.
And thanks to the developpers of JFormer of course !
testing...
meichen on 2012-05-07 08:39:24
if you can't set the initialValue for dropdown
add after code to __construct of JFormComponentDropDown after init values(about line 2682 in jformer.php)
if(isset($optionArray['initialValue']))
{
foreach ($this->dropDownOptionArray as $key => $value)
{
if($value['value']==$optionArray['initialValue'])
{
$this->dropDownOptionArray[$key]["selected"] = true;
break;
}
}
}