Editable select lists
Extension UIs often contain pop-up lists that are defined using the select tag. In Adobe Dreamweaver, you can make pop-up lists in extensions editable by adding editable="true" to the select tag. To set a default value, set the editText attribute and the value that you want the select list to display.
The following example shows the settings for an editable select list:
<select name="travelOptions" style="width:250px" editable="true" editText="other (please specify)"><option value="plane">plane</option><option value="car">car</option><option value="bus">bus</option></select>
When you use select lists in your extensions, check for the presence and value of the editable attribute. If no value is present, the select list returns the default value of false, which indicates that the select list is not editable.
As with standard, noneditable select lists, editable select lists have a selectedIndex property (see Objects, properties, and methods of the Adobe Dreamweaver DOM). This property returns -1 if the text box is selected.
To read the value of an active editable text box into an extension, read the value of the editText property. The editText property returns the string that the user entered into the editable text box, the value of the editText attribute, or an empty string if no text has been entered and no value has been specified for editText.
Adobe Dreamweaver adds the following custom attributes for the select tag to control editable pop-up lists:
Attribute name | Description | Accepted Values |
|---|---|---|
editable | Declares that the pop-up list has an editable text area | A Boolean value of |
editText | Holds or sets text within the editable text area | A string of any value |
NOTE | Editable select lists are available in Adobe Dreamweaver. |
The following example creates a Command extension that contains an editable select list using common JavaScript functions:
To create the example:
- Create a new blank file in a text editor.
- Enter the following code:
<html><head> <title>Editable Dropdown Test</title> <script language="javascript"> function getAlert() { var i=document.myForm.mySelect.selectedIndex; if (i>=0) { alert("Selected index: " + i + "\n" + "Selected text " + document.myForm.mySelect.options[i].text); } else { alert("Nothing is selected" + "\n" + "or you entered a value"); } } function commandButtons() { return new Array("OK", "getAlert()", "Cancel", "window.close()"); } </script></head><body><div name="test"><form name="myForm"><table> <tr> <td colspan="2"> <h4>Select your favorite</h4> </td> </tr> <tr> <td>Sport:</td> <td> <select name="mySelect" editable="true" style="width:150px" editText="Editable Text"> <option> Baseball</option> <option> Football </option> <option> Soccer </option> </select> </td> </tr></table></form></div></body></html> - Save the file as EditableSelectTest.htm in the Adobe Dreamweaver Configuration/Commands folder.
To test the example:
- Restart Adobe Dreamweaver.
- Select Commands > EditableSelectTest.
When you select a value from the list, an alert message displays the index of the value and the text. If you enter a value, an alert message indicates that nothing is selected.