How to access custom html attributes with jQuery?

Question

I am aware, that similar questions have been asked before, but I can't get it to work with those older posts.

I have the following FormGroup from ReactBootstrap

          <Form.Group controlId="formGridWeekdays">
            <Form.Label>Wochentage</Form.Label>
            <Form.Control
              style={{ height: "160px" }}
              as="select"
              multiple
            >
              <option value={RRule.MO} data-number="1">Montag</option>
              <option value={RRule.TU} data-number="2">Dienstag</option>
              <option value={RRule.WE} data-number="3">Mittwoch</option>
              <option value={RRule.TH} data-number="4">Donnerstag</option>
              <option value={RRule.FR} data-number="5">Freitag</option>
              <option value={RRule.SA} data-number="6">Samstag</option>
              <option value={RRule.SU} data-number="0">Sonntag</option>
            </Form.Control>
          </Form.Group>

And I want to access the data-number with jQuery like that:

daysOfWeek: $('#formGridWeekdays').attr('data-number'),

But I only get undefined

You are accessing data attribute of options . So proper approach would be iterating over options with prop selected as this is multi select options. $('#formGridWeekdays option:selected') and use each function to iterate in which you can access data like $(this).data('number') — MJN
– MJN, Commented Nov 26, 2019 at 19:08
Does this answer your question? jQuery - getting custom attribute from selected option — Marie
– Marie, Commented Nov 26, 2019 at 19:24
daysOfWeek: {…} 0: <option value="MO" data-number="1"> 1: <option value="WE" data-number="3"> 2: <option value="FR" data-number="5"> length: 3 Is what is being returned if i write the following: $('#formGridWeekdays option:selected').each(function(){ $(this).data('number') }) How would I get just an Array instead of an Object with the numbers? — leabum
– leabum, Commented Nov 26, 2019 at 19:33

Carlos Vaz · Accepted Answer · 2019-11-26 19:17:55Z

0

You can change attribute ControId to id in Form.Group ?

Set id="formGridWeekdays" and get elemento like this:

$('#formGridWeekdays option').data('number');

edited Nov 26, 2019 at 19:17

answered Nov 26, 2019 at 18:49

Carlos Vaz

235 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

leabum Over a year ago

Yout first option does not work unfortunately, your second option returns [object Object]

Marie Over a year ago

[object Object] is the result of doing .toString() on an object. What does the object actually look like?

Jose Lora · Accepted Answer · 2019-11-26 21:23:26Z

0

For you get the attribute of the selected option with jquery, you need to make this:

$('#formGridWeekdays option:selected').attr('data-number')

answered Nov 26, 2019 at 21:23

Jose Lora

1,3884 gold badges14 silver badges19 bronze badges

1 Comment

leabum Over a year ago

Hey, this gives me only the number of the first selected option, is there a way to return an Array of all the numbers of the selected options?

Collectives™ on Stack Overflow

How to access custom html attributes with jQuery?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related