How to add custom attribute dynamically to Select Option and how to fetch it using javascript or dojo

Question

I know, I know there must be some threads covering this topic. But I used the search and didn't get the answer which fits my needs. So here we go:

I am adding custom attribute to Select Option but i am not able fetch the value that particular attribute,

Option1 = domConstruct.create("option", {});
Option1.innerHTML = "2015";
Option1.value = "2015";
domAttr.set(Option1, "Type", "Input");

domAttr.get(evt.currentTarget[this.selectedIndex], "Type"); 
or
domAttr.get(evt.currentTarget.this.selectedIndex, "Type");
or
evt.currentTarget.selectedIndex.getAttribute('Type');
or
evt.currentTarget[this.selectedIndex].getAttribute('Type');

What kind of event is `event`? What is `event.currentTarget`? You've left out some context in your example. — Ken Franqueiro, Sep 19 '15 at 17:31

score 0 · Accepted Answer · answered Sep 19 '15 at 06:48

0

The question is not clear enough.. To fetch a value in a select > option element. You can do something like this using jquery $("select").on("change", function(){ console.log( $(this).val()); });

answered Sep 19 '15 at 06:48

user3323654

88
2
14

i want to fetch the value of custom attribute, i am adding attribute as a "Type" and its value as a "Input" – Mahesh Kalyankar Sep 19 '15 at 07:11
so i want to fetch ''Input" as a attribute value of that particular clicked option element – Mahesh Kalyankar Sep 19 '15 at 07:14
Oops, not really sure about it custom attributes. Thought, you just want to retrieve the value of the option element which is nested in select element. Maybe this would help you! :) [http://stackoverflow.com/questions/15010981/javascript-getting-custom-attribute-works-only-with-element-getattributeattrib] – user3323654 Sep 19 '15 at 10:26

belzebu · Answer 2 · 2015-09-21T05:34:14.387

First of all, when you are asking questions here at stack overflow, please keep the question clear and provide some clean code excerpt.

Secondly, I'd recommend to adhere to HTML5 valid notation when adding the data attribute to any element to avoid any clash with the element attributes. So let me suggest first

domAttr.set(Option1, "data-option-type", "input");

Once you are connected to the input element that contains the options via

on(input, "change", function(evt){
  var input = evt.currentTarget;
  var option = input.options[input.selectedIndex];
  // or
  // var option = input.selectedOptions[0];
  var optionType = domAttr.get(option, "data-option-type");
});

Hope that helps.

How to add custom attribute dynamically to Select Option and how to fetch it using javascript or dojo

2 Answers2