Am using jQuery selectmenu,which is changing for attribute of the label corresponding to the Select element.
Ex:
Am applying select menu like this
$('#ATTRIBUTE_4').selectmenu();
Its getting applied and my element turns like this.
<table>
<tr>
<td>
<label for="ATTRIBUTE_4-button">Label</label>
<span style="float:right;margin-right:15px;">:</span>
</td>
<td>
<select name="attribute_4" id="ATTRIBUTE_4" display: none;">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
<span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all"
tabindex="0" id="ATTRIBUTE_4-button" role="combobox" aria-expanded="false"
aria-autocomplete="list" aria-owns="ATTRIBUTE_4-menu" aria-haspopup="true"
aria-activedescendant="ui-id-5" aria-labelledby="ui-id-5"
aria-disabled="false" style="width: 165px;">
<span class="ui-icon ui-icon-triangle-1-s"></span>
<span class="ui-selectmenu-text">Open</span>
</span>
</td>
</tr>
</table>
In this its changing label for attribute also.
<label for="ATTRIBUTE_4-button">Label</label>
I can change to <label for="ATTRIBUTE_4">Label</label> using jQuery.But is there any way that we can do not to change this for attribute while applying selectmenu() method?
As documentation says,
The select menu is based on a native select element, which is hidden from view and replaced with a custom-styled select button.
As jQuery creates button based select with id="ATTRIBUTE_4-button" and hides your original one, therefore it changes for attribute of label to for="ATTRIBUTE_4-button" as to represent the newly created select button.
Also, it is complimentary to have unique ids for controls on the page.
But is there any way that we can do not to change this for attribute while applying selectmenu() method?
There is not any customization option to control this thing, however you have to write your custom logic if you have severe necessity to retain these attributes.