2

Say for example I have 

<select>
    <option id="4" data-name="tomato" data-length="six">Tomato</option>
    <option id="5" data-name="onion" data-length="five">Onion</option>
</select>

I'm trying to call some javascript code later that will take those data-names and length for different variables:

var str = "name=" + jQuery("#data-name").val() + "&length=" + jQuery("#data-length").val();

How would I do this for multiple attributes from the same element?

LatentDenis
  • 2,839
  • 12
  • 48
  • 99

6 Answers6

1

Try.....

 var select= $("select option:selected");
 var str = "name=" + $(select).attr('data-name') + "&length=" + $(select).attr('data-length');
CMedina
  • 4,034
  • 3
  • 24
  • 39
  • so if you have – LatentDenis Jan 28 '16 at 20:26
  • if it is only right that I select option "option:selected"...You want all values?? – CMedina Jan 28 '16 at 20:28
  • Hey, when I implement this same code on a same yet different code, it breaks for me on that first line, "var $opt = $("#selection option:selected");", the error I get is "Uncaught TypeError: $ is not a function" – LatentDenis Feb 01 '16 at 19:02
1

You could access jQuery data-attributes with data() function:

var $opt = $("select option:selected");
var str = "name=" + $opt.data("name") + "&length=" + $data("length");

Or simply treating them as attributes:

var $opt = $("select option:selected");
var str = "name=" + $opt.attr("data-name") + "&length=" + $opt.attr("data-length");

This question may help you to understand the differences between these two approaches: jQuery Data vs Attr?.

Community
  • 1
  • 1
Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
0

Check this fiddle : here

In jquery, use $().data('') to get a data property of an element

jquery

$(document).ready(function() {
  alert($("#4").data('name') + " || " + $("#4").data('length'));
});
stark
  • 2,246
  • 2
  • 23
  • 35
  • Hey, when I implement this same code on a same yet different code, it breaks for me on that first line, "var $opt = $("#selection option:selected");", the error I get is "Uncaught TypeError: $ is not a function" – LatentDenis Feb 01 '16 at 19:03
  • That's because you haven't included the jquery library in your code, $ is not a function error arises in that case. – stark Feb 01 '16 at 23:30
0

You can get the value using .data():

var str = "name=" + jQuery("#1").data("name") + "&length=" + jQuery("#1").data("length");
stark
  • 2,246
  • 2
  • 23
  • 35
jasonwarford
  • 746
  • 5
  • 11
0

If you don't want to use jQuery, there are at least two approaches:

  1. If you need the new variables before the user submits the form with your select control, you can attach an "onchange" to the <select> tag to trigger a Javascript function you create to assign the user-selected value(s) to JS variable(s).

  2. If you need the new variables after the user submits the form containing your select control, then on the page to which the form sends the user (and it can be the same page the form is on), you could use PHP to catch the submitted values and to write your Javascript variables into the page's header area.

If you allow multiple selections from a single control, watch for the user-selected values to be returned as an array.

Hope this helps!

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Marlin Ouverson
  • 101
  • 5
0

Use data() method to access data attribute value , Example

jQuery(document).ready(function($){
  $('select option').each(function(){
    alert('name='+ $(this).data('name') +  '&length=' + $(this).data('length') );
  });

});

https://jsfiddle.net/fem243o3/3/

N Nem
  • 743
  • 8
  • 14
  • Hey, when I implement this same code on a same yet different code, it breaks for me on that first line, "var $opt = $("#selection option:selected");", the error I get is "Uncaught TypeError: $ is not a function" – LatentDenis Feb 01 '16 at 19:04
  • i think you haven't included jquery library. – N Nem Feb 01 '16 at 19:34