Specifications
User Interfaces for Extensions 35
The following example creates a command that contains an editable select list using common
JavaScript functions:
<html>
<head>
<title>Editable Dropdown Test</title>
<script language="javascript">
function getAlert()
{
var i=document.myForm.mySelect.selectedIndex;
alert ("selectedIndex: " + i);
if (i>=0)
alert("selected text " +document.myForm.mySelect.options[i].text);
else
alert("selected text " + document.myForm.mySelect.editText);
else
alert("nothing is selected");
}
function commandButtons()
{
return new Array("OK", "getAlert", "Cancel", "window.close()");
}
</script>
</head>
<body>
<div name="test">
<form name="myForm">
<table>
<tr> <td>button to click:</td><td>
<input type="button" value="button 1" onclick="getAlert();"></td>
</tr>
<tr>
<td>Editable DropDown with default text:</td>
<td><select name="mySelect" editable="true" style="width:150px"
editText="Editable Text">
<option> opt 1 </option>
<option> opt 2 </option>
<option> opt 3 </option>
</select></td></tr>
<tr> <td>Editable DropDown without default text:</td>
<td><select name="mySelect_no" editable="true" style="width:150px">
<option value="1"> opt 1 </option>
<option value="2"> opt 2 </option>
<option value="3"> opt 3 </option>
</select></td></tr>
</table>
</form>
</div>
</body>
</html>
To use this sample, save it to the Dreamweaver Configuration/Commands folder as
EditableSelectTest.htm. Restart Dreamweaver, and select EditableSelectTest from the Command
menu.