HTML Kit site requirements.

HTML editor / Mini Tutorial
HomeHTML-Kit downloadsAdd-ins that update and extend HTML-Kit's capabilitiesSoftware and authoring support channelsRegister -- download add-ons and support HTML-KitOnline tools for HTML-Kit users
 

Mini Tutorial

 Home > Support > Community > Mini Tutorials > Plugins > hkMakeOption...
 
 
Click for Details
 Using hkMakeOptionsList

What does 'hkMakeOptionsList' do?

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>
<option>one</option>
<option>two</option>
<option>three</option>
[snip]
<option>nineteen</option>
<option>twenty</option>
</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 &quot; , &amp; ,&lt; , &gt; and &#39;.

The above example is exactly what the basic option does. Even so, that saves you a fair bit of typing

Options

These are the options as listed on the plug-ins menu:

Plugin options

  • <option value="...">...</option>
  • <option value="#">...</option>
  • <option>...</option>

Calling the plug-in

When installed, this icon is added to the 'Tools' toolbar:

Plugin icon

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.

Style 1:

<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 &amp; Dud</option>.


Style 2:

<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.

Style 3:

<option>...</option>. A plain vanilla <option> tag!

Can you edit/customise this plug-in?

Yes. The plug-in is the file "C:\Program Files\Chami\HTML-Kit\Plugins\hkMakeOptionList.hks". Before editing the plug-in you are advised to back up the file. The plug-in was written in hkScript, HTML-Kit's own scripting language, which for the less experienced coder looks quite similar to JavaScript. If you can read JS, you should certainly be able to understand how the main functions does its work. If you mess up, uninstall and re-install the plug-in. To edit the file just open it using HTML-Kit or Notepad.

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:

Using:
<select name="" size="">
<option value="" selected>Choose a value</option>


...now using:
<option selected>five</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:

case 0:
  sOptions = sOptions + "<option value=\""+aLines[n]+"\">"+sLine+"</option>\n";
break;
case 1:
  sOptions = sOptions + "<option value=\""+inttostr(n+1)+"\">"+sLine+"</option>\n";
break;
case 2:   sOptions = sOptions + "<option>"+sLine+"</option>\n";

...for...

case 0:
  sOptions = sOptions + " <option value=\""+aLines[n]+"\">"+sLine+"</option>\n";
break;
case 1:
  sOptions = sOptions + " <option value=\""+inttostr(n+1)+"\">"+sLine+"</option>\n";
break;
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).

Your feedback is appreciated

Have questions? Feel free to post them on the HTML-Kit Support Forums.

Subject: 
Message: 
 
Optional Information:
Name: 
Email: 
Website: 
Rating: 
None  1/5  5/5 
Type: 
Public comment
Private message to the author
 
»  
thanksThis has saved me AGES of time reworking other folks ancient Javascript at work -Thank You - Wyzyrd
»  
Thank youThank you Thank you Thank you
»  
Thank youI was already using jslint through the web site, but having it in HTML-Kit is much more convenient. The {{SOURCE_ENCODED}} replace didn't work right away for me, but I found it and everything is perfect now. Thanks
 
 
(C) 2004, Mark Anderson. Read about Adobe Acrobat and Extensis Portfolio at Mark Anderson's Home Page.