Title: Additional data-attributes to option elements
Last modified: August 31, 2016

---

# Additional data-attributes to option elements

 *  Resolved [konsument](https://wordpress.org/support/users/konsument/)
 * (@konsument)
 * [10 years ago](https://wordpress.org/support/topic/additional-data-attributes-to-option-elements/)
 * Hey
 * is it possible to add data-attributes to option fields? I need a setup like this:
 * <option value=”100″ data-foo=”bar” data-john=”doe” data-bla=”some text to work
   with”>Lorem Ipsum Dolor</option>
 * How can I achieve this?
 * best
 * [https://wordpress.org/plugins/calculated-fields-form/](https://wordpress.org/plugins/calculated-fields-form/)

Viewing 10 replies - 1 through 10 (of 10 total)

 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [10 years ago](https://wordpress.org/support/topic/additional-data-attributes-to-option-elements/#post-7424642)
 * Hi,
 * I’m sorry, but that is not possible in the current version of the plugin, however,
   you can enter as the text of the choices, a span tag with the custom attributes:
 * `<option value="100"><spam data-foo="bar" data-john="doe" data-bla="some text
   to work with">Lorem Ipsum Dolor</span></option>`
 * Best regards.
 *  Thread Starter [konsument](https://wordpress.org/support/users/konsument/)
 * (@konsument)
 * [10 years ago](https://wordpress.org/support/topic/additional-data-attributes-to-option-elements/#post-7424798)
 * thanks but the output gets messed up then:
 * <option vt=”<span data-foo=’bar’ data-john=’doe’ data-bla=’some text to work 
   with’>Lorem Ipsum Dolor</span>” value=”20″>Lorem Ipsum Dolor</option>
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [10 years ago](https://wordpress.org/support/topic/additional-data-attributes-to-option-elements/#post-7424799)
 * Hi,
 * Could you send me URL to the webpage where the form was inserted, please?
 * Best regards.
 *  Thread Starter [konsument](https://wordpress.org/support/users/konsument/)
 * (@konsument)
 * [10 years ago](https://wordpress.org/support/topic/additional-data-attributes-to-option-elements/#post-7424800)
 * sure
 *  Thread Starter [konsument](https://wordpress.org/support/users/konsument/)
 * (@konsument)
 * [10 years ago](https://wordpress.org/support/topic/additional-data-attributes-to-option-elements/#post-7424801)
 * ok. seems like option tags cant contain any other html tags. Do you have any 
   other idea? I badly need this option somehow. My head is about to explode… :/
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [10 years ago](https://wordpress.org/support/topic/additional-data-attributes-to-option-elements/#post-7424802)
 * Hi,
 * I’m sorry, my mistake, to use the spam tag as the text of the choice, should 
   be used other type of control, for example, the radio button field, but not a
   Drop down. My apologies.
 * Best regards.
 *  Thread Starter [konsument](https://wordpress.org/support/users/konsument/)
 * (@konsument)
 * [10 years ago](https://wordpress.org/support/topic/additional-data-attributes-to-option-elements/#post-7424803)
 * Well, I got about 100 elements. An other control field makes no sense here. Isnt
   there any other possibility to hack and crack it up to get it work somehow?
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [10 years ago](https://wordpress.org/support/topic/additional-data-attributes-to-option-elements/#post-7424804)
 * Hi,
 * Could you tell me how are used the additional attributes in the option tags, 
   please?
 * Best regards.
 *  Thread Starter [konsument](https://wordpress.org/support/users/konsument/)
 * (@konsument)
 * [10 years ago](https://wordpress.org/support/topic/additional-data-attributes-to-option-elements/#post-7424806)
 * I want to populate option values based on url params as Ive descibed [here](https://wordpress.org/support/topic/url-params-and-dropdown-dependencies?replies=12)
   already.
 * Now my option values e.g. look like this:
 * <option>The best massage you ever had – 90 minutes – 100 Euro</option>
 * What I need are seperate values for this option to work with them:
 * <option data-sectionid=”1″ data-massageid=”5″ data-massagetitle=”The best massage
   you ever had” data-massagetime=”90 minutes” data-massageprice=”100 Euro”>The 
   best massage you ever had – 90 minutes – 100 Euro</option>
 * The section- and massageid are values I want to get from url to preselect the
   options. The other values are for building a preview of an voucher to dynamical
   fill html tags with them.
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [10 years ago](https://wordpress.org/support/topic/additional-data-attributes-to-option-elements/#post-7424809)
 * Hi,
 * In reality it is not possible to define the additional attributes of the drop
   down choices through the forms builder, however, you can get it with some additional
   code.
 * For example, if you add a custom class name to the field, for example: “my-field”,
   through the attribute: “Add Css Layout Keywords”, and then inserting a “HTML 
   Content” field in the form, with a code similar to the following one, as the 
   field’s content:
 *     ```
       <script>
       custom_attr = [
       {sectionid:1,massageid:1,massagetime:'qwerty',massageprice:'asdfg'},
       {sectionid:2,massageid:2,massagetime:'sdfgsf',massageprice:'sdfgs'},
       {sectionid:3,massageid:3,massagetime:'cxvbx',massageprice:'rtert'}
       ];
   
       fbuilderjQuery(document).one('showHideDepEvent', function(){
   
       var $ = fbuilderjQuery;
       $('.my-field option').each(function(index){
       var e = $(this);
       if(typeof custom_attr[index] != 'undefined' )
       {
       e.attr('data-sectionid', custom_attr[index]['sectionid']);
       e.attr('data-massageid', custom_attr[index]['massageid']);
       e.attr('data-massagetitle', e.text());
       e.attr('data-massagetime', custom_attr[index]['massagetime']);
       e.attr('data-massageprice', custom_attr[index]['massageprice']);
       }
       });
       });
       </script>
       ```
   
 * Best regards.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Additional data-attributes to option elements’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

 * 10 replies
 * 2 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/additional-data-attributes-to-option-elements/#post-7424809)
 * Status: resolved