Setting the Selected Value in CoralUI 3

Published on by Dan KlcoPicture of Me Dan Klco

Setting the value of a coral-select element in the CoralUI framework v3 is somewhat complicated. It is also different than the process for CoralUI v2 and for standard HTML5 select elements. With standard HTML5 select elements, you can simply use a snippet like this to set the selected value:   $('#my-select').val(value);   This does not work for a coral-select, however, as a coral-select contains several sub-elements to render the look and feel of the select and to see the actual form value.   <coral-select class="coral-Form-field coral3-Select" name="order" data-foundation-validation="" data-validation="" placeholder="" __vent-id__="2" aria-mutiselectable="false" aria-required="false" aria-invalid="false" aria-disabled="false" aria-readonly="false"> <button is="coral-button" class="coral-Button coral-Button--secondary coral-Button--block coral3-Select-button" size="M" variant="secondary" handle="$button" type="button" block="" role="combobox" aria-expanded="false" aria-haspopup="true" id="coral-id-0" aria-controls="coral-id-1" aria-owns="coral-id-1"> <coral-button-label></coral-button-label> <coral-icon class="coral-Icon coral3-Select-openIcon coral-Icon--chevronDown coral-Icon--sizeXXS" icon="chevronDown" size="XXS" handle="icon" role="img" aria-label="chevron down"></coral-icon> <span handle="label" class=" coral3-Select-label">Default</span> </button> <input handle="input" type="hidden" name="order" value="SCORE()"> <select handle="nativeSelect" class=" coral3-Select-select" tabindex="-1"> <option selected="selected" value="SCORE()">Default</option> <option value="[jcr:content/cq:lastModified] DESC">Last Modified</option> <option value="[jcr:content/cq:lastModified] ASC">Oldest</option> </select> <coral-taglist...

Tags