Get custom html attribute from <select> control with JQuery

Question

I was wondering what am I doing wrong here?

I have the following HTML:

<select name="somename" id="DropDownList1">
    <option value=""></option>
    <option value="1" valp="7700000000000000">Item 1</option>
    <option value="2" valp="7C08000000000000">Item 2</option>
    <option value="3" valp="5800000000000000">Item 3</option>
</select>

And the following JS/JQuery code that is called when the page loads:

$('#DropDownList1').change(function () {
    onChangeDropDownList1(this);
});

function onChangeDropDownList1(obj) {
    var vP = $(obj).attr('valp');
    alert("valp=" + vP);
};

As the result I get "valp=undefined"

Michael Berkowski · Accepted Answer · 2012-03-10 02:50:58Z

6

this in context of the .change() refers to the <select> rather than the <option>, so you're not getting the node with the valp attribute.

$('#DropDownList1').change(function () {
    onChangeDropDownList1(this);
});

function onChangeDropDownList1(obj) {
    // Get the selected option
    var vP = $(obj).find(':selected').attr('valp');
    alert("valp=" + vP);
};

Here is a demonstration.

answered Mar 10, 2012 at 2:50

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

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

Comments

JaredPar · Accepted Answer · 2012-03-10 02:50:54Z

2

The change function is providing you the select which was updated not the option. You need to query the :selected value out of it. Once you have the selected option you can query for the valp attribute

function onChangeDropDownList1(obj) {
    var vP = $(obj).find('option:selected').attr('valp');
    alert("valp=" + vP);
};

Fiddle: http://jsfiddle.net/Jpfs3/

answered Mar 10, 2012 at 2:50

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

Comments

pete · Accepted Answer · 2012-03-10 02:52:09Z

0

Pass the option, not the select:

onChangeDropDownList1($(this).children(':selected'));

or, grab the option from the passed select:

var vP = $($(obj).children(':selected')).attr('valp');

answered Mar 10, 2012 at 2:52

pete

25.2k4 gold badges40 silver badges52 bronze badges

Comments

Mostafa Maklad · Accepted Answer · 2012-03-10 03:34:23Z

0

Just put the JS code before the end of the body

edited Mar 10, 2012 at 3:34

answered Mar 10, 2012 at 3:03

Mostafa Maklad

3472 silver badges13 bronze badges

Collectives™ on Stack Overflow

Get custom html attribute from <select> control with JQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related