how to shorten selected option for display

I am using the Chosen jQuery plug-in for a multiple-select box.

I have a requirement to display detailed options in the drop-down list to aid the user in their selection, but do not wish to display these long versions in the “selected” textbox. For example, say the drop-down list displayed the following two options:

“Opt1 – Description of Opt1”

“Opt2 – Description of Opt2”

But if the user selected Opt1, I only wish to display “Opt1” in the “selected” field.

Is this possible?

EDIT: This is the HTML for the select field in question:

<select class="form-control chosen-select tsm-field-lg" id="POCs" name="POCs" multiple data-placeholder="Select POCs...">
    {{#each POCs}}
    <option value="{{POCID}}" {{#ifCondMulti  ../CORE_VisitPOC POCID "POCID"}} selected {{/ifCondMulti}}>{{POCCode}} - {{Description}}</option>
    {{/each}}
</select>

I am using Handlebars and there is a Helper function in there to indicate the selected option(s), but that's not relevant to this issue.

So as it stands, the drop-down will display POCCode and Description, but I only want POCCode to be transferred to the set of selected values.

Hope this is clear.

1 answer

  • answered 2017-01-11 14:19 PersyJack

    Add a max-width to your select element:

    <select id="opt" name="opt" style="max-width:30px">