Quote from: BobRay at Nov 13, 2017, 10:50 PMI think you'll want select multiple if you want a multi-select:
<select multiple="" name="MembershipStatus" value="[[+MembershipStatus]]" class="x-form-text x-form-field">
For the rest of it (especially the styling), take a look at the source of the Create/Edit Resource page in Chrome Dev. Tools or Firebug and check out the Template dropdown. It usually takes some trial and error to get things right.
FYI, screenshots no longer work in the Forums. You have to put them somewhere else and put a link to them.</select>
Adding <select multiple> just gives me the regular HTML select field where the user has to shift-click each option. I'd like to have the MODX multi-select list that's more of a dropdown style.
I looked at the manager code with the chrome inspector, but it looks like the manager does some JS magic and the final output code doesn't seem like what you would want to put in your markup. I was hoping there was some other class or something to put in the select field to trigger the MODX manager JS to treat it like it does the native fields.
Here's a dropbox link to my screenshot:
https://www.dropbox.com/s/0rm25f7kj7m9eld/Screenshot%202017-11-13%2015.15.54.png?dl=0
Also, here's an example of the MODX output code for the gender field:
<div class="x-form-item x-tab-item" tabindex="-1" id="ext-gen137">
<label for="modx-user-gender" style="width:auto;" class="x-form-item-label" id="ext-gen138">Gender</label>
<div class="x-form-element" id="x-form-el-modx-user-gender" style="padding-left:0;">
<div class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" id="ext-gen139" style="width: 198px;">
<input type="hidden" name="gender" id="ext-gen141" value="1">
<input type="text" size="24" autocomplete="off" id="modx-user-gender" class="x-form-text x-form-field x-trigger-noedit x-form-focus" readonly="" style="width: 160px;" title="">
<div class="x-form-trigger x-form-arrow-trigger" id="ext-gen140"></div>
</div>
</div>
<div class="x-form-clear-left"></div>
</div>
Then at the bottom of the page is the actual drop down:
<div class="x-layer x-combo-list " id="ext-gen393" style="position: absolute; z-index: 12007; visibility: visible; left: 389px; top: 204px; width: 198px; height: 96px; font-size: 13px;">
<div class="x-combo-list-inner" id="ext-gen394" style="width: 198px; height: 94px;">
<div class="x-combo-list-item"></div>
<div class="x-combo-list-item">Male</div>
<div class="x-combo-list-item">Female</div>
<div class="x-combo-list-item x-combo-selected">Other</div>
</div>
</div>
I don't even see a reference between the two for which combo-list to display for which hidden field...