How to assign html attribute to select component during mapping?

[Adam Garbinski]

Hello,
I try to assign html attribute "data-something" to the option of select component. I need this because it seems the only way to get text label of selected option and store it in local storage for further use in my project. Simple way to achieve this is described here http://jsfiddle.net/TLGY7/12/ but I need to implement this approach during mapping, since I populate my select component from REST service. You can see my mapping on the screen below.
So the question is how can I do it? I tried many approaches with various selectors but I still get "unassigned" response when I check that attribute value.
My only success was to assign that attribute to all input elements by this Javascript:
$(":input").attr("data-group", value.SubGroup);
which destroys all previous assingments and lefts only last value readed during mapping process, but at least gives me information that it is possible, but I need to use different selector.
So I would greatly appreciate your guidance on that.

[Maryna Brodina]

Hello! Add JS in mapping. To trigger element use pre$(element)/pre

[Adam Garbinski]

Do you mean this?

$(element).attr("data-group", value.SubGroup);

If yes, it does not work. I still get unassigned response.

If I use this:

$(":input").attr("data-group", value.SubGroup);

all my options give the same value after clicking.

[Maryna Brodina]

Hello! As we can see from screenshot you map to Select and Select options get this attribute (you can check on developers console). Could you post code you use and as a result have "unassigned response"?

[Adam Garbinski]

Sure. Take look at it:

alert(Appery('Subgroup').attr('data-group'));

'Subgroup' is the name of my Select component. And this code is assigned to "Value change" event.
As I mentioned before, alert gives "Unassigned" response all the time, except the case in which I put this code in mapping:

$(":input").attr("data-group", value.SubGroup);

Then I get the name of the same option (last option on the list), regardless of which one I click. I guess ":input" selector is wrong because it selects all inputs, including all the one that were given html attibute in previous mapping iteration, in effect overwriting them.

[Kateryna Grynko]

Hi Adam,

Please try using the following code in mapping, as before:pre$(element).attr("data-group", value.SubGroup);/pre
Then you can get these elements using the following code:pre$("[rerender=Subgroup][data-group]")/pre

[Adam Garbinski]

Hi Katya,
I use this code on click event:

alert ($("[rerender=Subgroup][data-group]").attr('data-group'));

and i get the name of the first element on the list of options, regardless of which one I click. Have I missed something important?

[Kateryna Grynko]

Adam,

Use the following code to access each array element:prevar arr = $("[rerender=Subgroup][data-group]").attr('data-group');
arr.each(function(e){alert(arr[e]);})/pre

[Adam Garbinski]

Now, after clicking on any item I get this error:

Uncaught TypeError: Object Dania szybkie has no method 'each'

This is what I have as Run Javascript event (click):

var arr = $("[rerender=Subgroup][data-group]").attr('data-group');
arr.each(function(e){
alert(arr[e]);
});

[Kateryna Grynko]

Hi Adam,

Sorry, my bad. Try the following:prevar arr = $("[rerender=Subgroup][data-group]");
if (arr !== undefined){
arr.each(
function(e) {
alert($(arr[e]).attr('data-group'));
});
}/pre