Forum | Appery.io

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.

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

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.

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"?

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.

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

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?

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

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]);
});

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