CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
bmurrell30
bmurrell30

Reputation: 715

Selected value of dropdown menu selected using 'parents' and 'find' returns undefined - Jquery

I have a table containing multiple instances of the same dropdown menu; each row of the table represents a unique operation, so I need to be able to capture the user's selection on this dropdown menu each time.

My HTML code looks like this (truncated for brevity):

<tr class="convRow"><td>
    <select class="convSelect">
        <option value="Select" selected="selected">Select</option>
        <option value="1">Foo</option>
        <option value="2">Bar</option>
    </select>
</td></tr>

On the dropdown's change event, I call this Jquery function:

function convertThis(e) {
    var targ = e.target || e.srcElement,
        cSel = $(targ).parents('.convRow').prev().find('.convSelect').val();

    console.log(cSel);
}

Obviously more will have to happen here than a console.log, but you get the idea. The point is that cSel currently returns undefined, when it should return 1, 2, or Select based on what the user has chosen -- I want to get the value, as opposed to the selected text.

There will be seven table rows of class 'convRow', and different instances where this piece of data will need to be retrieved -- not just the dropdown change event, which is why I'm doing it this way. I have also tried the function minus the 'prev()' function with no success. Any ideas?

Upvotes: 1

Views: 293

Answers (2)

Umakant Ver.a
Umakant Ver.a

Reputation: 1

I think you should use jquery event

 $(".convSelect").on('change', function(){
   sSel = $(this).val();
   console.log(sSel);
})

Upvotes: 0

Satpal
Satpal

Reputation: 133433

I would recommend you to directly use .val() method in the current element's this context. like

function convertThis(e) {
    var sSel = $(this).val();
    console.log(cSel);
}

However, You need to remove .prev() from the statement as it will search element in previous sibling of tr element.

Use

$(targ).parents('.convRow').find('.convSelect').val();

instead of

$(targ).parents('.convRow').prev().find('.convSelect').val();

Upvotes: 1

Related Questions