Make the "Select" Form Element Easy with Mivascript

Create, populate, and select form options the easy way.

Using shortcut functions makes your mivascript projects go faster. This function takes the hassle out of the select form element.

by Scot Ranney

The "select" form element let's people select from a list of options. The only real problem with it is when the data is being edited there may be a lot of MvIF's to contend with and if there are a lot of "select" form elements, populating the form data with the right selection can get messy with a lot of extra code.

Here's a mivascript function that makes this super easy and removes the mess.

<MvFUNCTION NAME = "select" PARAMETERS = "class,default,name,condition,options" STANDARDOUTPUTLEVEL="compresswhitespace,text,html" >
    <MvASSIGN NAME = "l.options" VALUE = "{ miva_array_deserialize( l.options ) }" />
    <select class="{ l.class } name="{ l.name }">
        <option value=""><MvEVAL EXPR = "{ l.default }"></option>
        <MvFOREACH ITERATOR = "l.option" INDEX = "l.pos" ARRAY = "l.options">
            <MvIF EXPR = "{ gettoken(l.option,'-',1) EQ l.condition }">
                <option value="{ gettoken(l.option,'-',1) }" selected><MvEVAL EXPR = "{ gettoken(l.option,'-',2) }"></option>
            <MvELSE>
                <option value="{ gettoken(l.option,'-',1) }"><MvEVAL EXPR = "{ gettoken(l.option,'-',2) }"></option>
            </MvIF>
        </MvFOREACH>
    </select>
</MvFUNCTION>

The class parameter sets the "select" form element class.
The defaultparameter sets the no-value option (like, "Select one...")
The name parameter is the name of the variable for the "select" form element.
The condition parameter is the what has to match in order to make an option selected.
The options parameter is a list of option values and labels.

The options parameter is set up in a deserialized array style and we also use a dash to separate the value from the option label:

<MvASSIGN NAME = "l.options" VALUE = "{ 'value1-Option Label One,value2-Option Label Two,value3-Option Label Three,value4-Option Label Four' }" />

Here's a basic call to list the above options without anything selected. This would be used for a fresh form for a new record.

<MvASSIGN NAME = "l.ok" VALUE = "{ select(l.null,'Select one...','selected_value',l.null,l.options) }" />

When you're populating the form for editing you would set the condition that needs to be matched so the proper "option" is preselected. In this example we'll set the condition to 'value2' so it's automatically selected:

<MvASSIGN NAME = "l.condition" VALUE = "{ 'value2' }" />
<MvASSIGN NAME = "l.ok" VALUE = "{ select(l.null,'Select one...','selected_value',l.condition,l.options) }" />

This sets the value2 option as selected:

I'm using the bootstrap framework here so I could include the form-control class:

<MvASSIGN NAME = "l.condition" VALUE = "{ 'value2' }" />
<MvASSIGN NAME = "l.ok" VALUE = "{ select('form-control','Select one...','selected_value',l.condition,l.options) }" />

This will evaluate to:

<select class="form-control" name="selected_value">
    <option value="">Select one...</option>
    <option value="value1">Option Label One</option>
    <option value="value2" selected>Option Label Two</option>
    <option value="value3">Option Label Three</option>
    <option value="value4">Option Label Four</option>
</select>

These articles might be interesting for you as well:

Make the "Select" Form Element Easy with Mivascript

Create, populate, and select form options the easy way.

Related Articles