CODEWITHSUNDEEP
jqueryjquery-plugins
KTAnj
KTAnj

Reputation: 1356

Get attribute of selected <option> in ddSlick dropdown

I am using your ddslick plugin with select element. 

<select name="category" id="cat">
    <option cat_type="2" value="cat1" id="hello">Category1</option>
    <option cat_type="1" value="cat2" id="hello2">Category2</option>
</select>

In here when select category I need to get selected value cat_type. I tried as below.

$('#cat').ddslick({
    width: "100%",
    onSelected: function (data) {
        console.log(data.selectedData);    
    }
});

OUTPUT 

Object { text="Category1", value="cat1", selected=true, more...}

But cat_type attribute is not there. Please help me If someone have experience with ddslick plugin.

I have Inspect the html source for the select tag. but It doesn't contain that attribute.

<div id="cat" class="dd-container" style="width: 100%;">
   <div class="dd-select" style="width: 100%; background: none repeat scroll 0% 0% rgb(238, 238, 238);">
     <input type="hidden" class="dd-selected-value" value="cat2"><a class="dd-selected">
     <label class="dd-selected-text">Category2</label></a><span class="dd-pointer dd-pointer-down"></span>
 </div>

 <ul class="dd-options dd-click-off-close" style="width: 100%; display: none;">
    <li><a class="dd-option"> <input type="hidden" value="cat1" class="dd-option-value"> <label class="dd-option-text">Category1</label></a>
    </li>
    <li><a class="dd-option dd-option-selected"> <input type="hidden" value="cat2" class="dd-option-value"> <label class="dd-option-text">Category2</label></a>
   </li>
</ul>

Upvotes: 2

Views: 1881

Answers (1)

Sandy Chapman
Sandy Chapman

Reputation: 11341

After playing around with the Chrome debugger, it looks like you can do this to access your cat_type attribute:

$(data.original[0].children[data.selectedIndex]).attr('cat_type')

See this JSFiddle for an example:

https://jsfiddle.net/vpwLqtcv/2/

Upvotes: 2

Related Questions