CODEWITHSUNDEEP
jquerycssmaterialize
Kalidas Rajeev
Kalidas Rajeev

Reputation: 85

How to get data-value of drop down in materialize css?

i want to get the data-value that i set inside 'a' tag which is a dropdown in materialize css 

<a class="dropdown-trigger" data-target="dropdown1" data-value="3" style="outline: 0;" href ="#">link</a>

<script>
$(document).ready(function(){
      $('.dropdown-trigger').dropdown({
              hover: true,
              inDuration: 225,
              coverTrigger: false,
              constrainWidth: false,
              onOpenStart: function dropdownvalue(){
                $.ajax({
                  type: 'GET',
                  url: 'api/values?id= NEED DATA-VALUE HERE',
                  processData: false,
                  contentType: 'application/json',
                  data: '',
success: function(r){},
error: function(r){} });
</script>

I have multiple 'a' tag in same class

Upvotes: 0

Views: 429

Answers (2)

charlietfl
charlietfl

Reputation: 171669

One common approach for plugins that require element specific data is to initialize them in an each loop so you can access that instance inside a closure

$('.dropdown-trigger').each(function() {
  var $trigger = $(this),
  // use value in onOpenStart()
    value = $trigger.data('value');
  // init plugin for this instance
  $trigger.dropdown({
      hover: true,
      inDuration: 225,
      coverTrigger: false,
      constrainWidth: false,
      onOpenStart: function dropdownvalue() {
        $.ajax({
          type: 'GET',
          url: 'api/values?id=' + value,             
          success: function(r) {},
          error: function(r) {}
        });

      })
  })
})

Upvotes: 1

Citer
Citer

Reputation: 13

Why don't you add data-toggle="dropdown" in your a, and in javascript just create a function like:

$('.dropdown-trigger').on('click', function(){
 var value = $(this).data('value');
 your ajax script
}

Upvotes: 0

Related Questions