CODEWITHSUNDEEP
javascriptjqueryhtml
user3643520
user3643520

Reputation: 105

jquery - add extra data inside select tag

Using jQuery, how do I add some extra info into a form select tag?

In my searching I have seen jQuery's append and add and html tags but it looks they add the info below the item, not in the item?

I want to add...

eform="Australian State::1"

into the line...

<select id="state-au" name="state-au">

so it becomes...

<select id="state-au" name="state-au" eform="Australian State::1">

I am hoping to use this in a MODx Evolution email form to make the Australian State select box a required field with jQuery - that select box is dependent on the country select box: If Australia is selected, the Australian State select box is shown. I am doing that with the following code so the new code would be added into this...

$('#country').bind('change', function (e) {
    if( $('#country').val() == 'AU') {
        $('#stateAU').slideToggle('fast');
    }
    else {
        $('#stateAU').hide();
    }
}).trigger('change');

Any help greatly appreciated.

Upvotes: 1

Views: 449

Answers (3)

Dalin Huang
Dalin Huang

Reputation: 11342

Use jQuery's attr() method to add(or update) attribute to element:

Add new attribute with:

$("#state-au").attr("eform","Australian State::1");

Remove attribute with:

$("#state-au").removeAttr("eform");

Solution:

$('#country').bind('change', function (e) {
    if( $('#country').val() == 'AU') {
        $("#state-au").attr("eform","Australian State::1");
        $('#stateAU').slideToggle('fast');
    }
    else {
        $("#state-au").removeAttr("eform");
        $('#stateAU').hide();
    }
}).trigger('change');

I would recommend use .data() if you want to bind data to a specific element. Check the following example.

Set data use: $("#state-au").data("eform", "Australian State::1")

Get data use: $("#state-au").data("eform")

Remove data use: $("#state-au").removeData("eform")

.data()

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

REF: https://api.jquery.com/data/

The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

.removeData()

The .removeData() method allows us to remove values that were previously set using .data(). When called with the name of a key, .removeData() deletes that particular value. When called with no arguments, .removeData() removes all values.

REF: https://api.jquery.com/removeData/

$(document).ready(function() {
  $("#state-au").data("eform", "Australian State::1");
  console.log($("#state-au").data("eform"));
  $("#state-au").removeData("eform");
  console.log($("#state-au").data("eform"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="state-au" name="state-au"></select>

Upvotes: 4

Sam
Sam

Reputation: 317

HTML5 supports data attribtutes which can be used to attach additional information/ data on DOM. Jquery supports this features using its data() method

<select id="state-au" name="state-au" data-eform="Australian State::1">

To get data we use

var eform = $("#state-au").data("eform");

To insert data we use

$("#state-au").data("eform", "Australian State::1");

Upvotes: 0

Haze
Haze

Reputation: 196

$("#state-au").attr("eform", "Australian State::1");

Upvotes: 0

Related Questions