xProfile multi select box output: Include option IDs

[henry.wright]

Hi guys,

Here's a snippet of front-end output when using the multi select box xProfile field type:

<select id="field_436[]" name="field_436[]" multiple="multiple">
    <option value="Afrikaans">Afrikaans</option>
    <option value="Albanian">Albanian</option>
    <option value="Arabic">Arabic</option>
    <option value="Azerbaijani">Azerbaijani</option>
    // More
</select>

Is there any chance we can output option IDs too? Something like:

<select id="field_436[]" name="field_436[]" multiple="multiple">
    <option value="Afrikaans" id="6583">Afrikaans</option>
    <option value="Albanian" id="6584">Albanian</option>
    <option value="Arabic" id="6585">Arabic</option>
    <option value="Azerbaijani" id="6586">Azerbaijani</option>
    // More
</select>

Note checkbox output already has option IDs.

[slaFFik]

I think yes, and in general all profile field options should have some sort of ID in DOM.
That includes select, select_multiple, checkbox, radio etc

[johnjamesjacoby]

Check the commit history to make sure this exact thing wasn't already removed.

There used to be a problem with duplicate field IDs on the page. If we put them back in, they should probably be prefixed – numbers alone don't help target them any differently than pages or posts.

[slaFFik]

@johnjamesjacoby
Sure, I checked checkboxes before answering. They are prefixed like field_8_2. And just numbers as ids won't work in some situations (don't remember exactly why), so they definitely need to be prefixed. And as they are stored in one table, we can easily reuse the same naming pattern.

[hnla]

Remember an ID token cannot begin with a numeral!

Why are thse required/useful?

Consider using classes in preference to IDs they can begin with a numeral.

Is this a hook, for JS perhaps?
Consider using data-*="" attributes instead/as well as?

[slaFFik]

I believe it's useful for js, when conditionally hiding some options based on other fields options or data. Data attributes are slower than selecting by Id.

[henry.wright]

@hnla

You're right about needing it for JavaScript.

@slaFFik

Conditional profile fields is exactly my use case.

With reference to the most appropriate attribute to use, so far we've suggested data-*, class and id.

There's also the issue of prefixing.

If I'm not mistaken, field_6815_1 is the format currently used for the checkbox field type and id is the attribute used. If merely to be consistent, shall we keep it like that?

[hnla]

whatever decided can we please ensure we DON'T user Caps or underscores in tokens it's wrong and a shame they have occurred historically.

I would suggest perhaps id="field-option-6815" or field-436-option-6815 ?

data attr in this context wasn't an appropriate suggestion we're not passing data over

[henry.wright]

For the record radio buttons use id="option_6815".