The hkMakeOptionsList plugin works on the current selection and turns each line into an <option> tag and wraps the entire block in <select></select> tags. There are several choices for adding attributes and these options will be described in more detail later in this article.
So, what problem does this plug-in solve? Well, it is not so much solving a problem as saving a lot of typing if you've got a very large list. This is all the more true if you are also embedding the text as a 'value' attribute.
For this demo, we'll take a list of numbers, "One" through "Twenty" and make it into a <select> block. Like this:
We get a nice list with the first option showing. The code looks like this:<select>
What the example above doesn't show is the text in each line that is escaped for problematic HTML characters. These are ", &,<, > and ' (apostrophe) being rendered in code as " , & ,< , > and '.
The above example is exactly what the basic option does. Even so, that saves you a fair bit of typing
These are the options as listed on the plug-ins menu:
When installed, this icon is added to the 'Tools' toolbar:
Alternatively, use the menu sequence: "Actions / Tools / hkMakeOptionsList."
If you click the actual icon you invoke the as-installed default or - after first use - the last used option. To deliberately select an option, click the little black triangle to the right of the icon and the plug-in's menu, as shown in the earlier screen grab. Clicking a menu item results in that option style being applied by the plug-in.
<option value="...">...</option>. This is, in my opinion the most useful version. As well as creating the basic tags, the line's text is also embedded as the value of the 'Value' attribute. For example:
<option value="Pete & Dud">Pete & Dud</option>.
<option value="#">...</option>. This style simply writes the sequential number of the source line as the value of the 'Value' attribute. For example:
<option value="2">Some text</option> where some text is the second line in the selection.
<option>...</option>. A plain vanilla <option> tag!
Hack #1: I would recommend adding in blanks for the <select> tag's attributes, and a dummy 'selected' <option> element. I'll explain what to edit and then explain what the changes do. In the hkpMain() function in the source, find this line of code:
sOutput = "<select>\n" + sOptions + "</select>\n";
...and replace it with...
sOutput = "<select name=\"\" onClick=\"\" size=\"\">\n<option value=\"\" selected>Choose a value</option>\n" + sOptions + "</select>\n";
What does this do? Name is important if you want to script or do DHTML. Size, if set to greater than "1" turns the dropdown into a listbox.; the following example sets a 'size' value of 5:
If size="" is left empty or set at "0" or "1", the <select> acts as a drop down (i.e. if you don't want to use the size attribute you can just ignore it).
Now let's look at the selected attribute in an <option> element. The next two examples: first use the default from my hack above followed by a second where the 'dummy' first option has been removed but we've added 'selected' to item #5. Note how the selected value is just added on its own, instead of the more usual attributeName="attributeValue" pair. Now the examples:
<select name="" size="">
<option value="" selected>Choose a value</option>
The 'dummy' first option is useful when scripting as, by checking for an empty value for the currently selected option, you can tell if the user has made a choice and warn appropriately.
Hack #2: For Tidy-like code beautify, make this swap:
sOptions = sOptions + "<option value=\""+aLines[n]+"\">"+sLine+"</option>\n";
sOptions = sOptions + "<option value=\""+inttostr(n+1)+"\">"+sLine+"</option>\n";
case 2: sOptions = sOptions + "<option>"+sLine+"</option>\n";
sOptions = sOptions + " <option value=\""+aLines[n]+"\">"+sLine+"</option>\n";
sOptions = sOptions + " <option value=\""+inttostr(n+1)+"\">"+sLine+"</option>\n";
case 2: sOptions = sOptions + " <option>"+sLine+"</option>\n";
...so, we add 2 spaces in front of the start of the option tag (you could use a tab instead).
Have questions? Feel free to post them on the HTML-Kit Support Forums.