Question

I have an ajax get where I would like to get the selected value of a dropdown that is in that response html.

this is the html returned in the html.

<select id="f_pic1" name="f_pic1">
<option selected="selected" value="1">My Pic</option>
</select>

part of the ajax success function

success: function (html)
{
    var ddlId = 'f_pic1';
    var outResult = $(html);

    // listed here are different attempts.
    // attempt 1
    var ddl = outResult.find('#' + ddlId + ' option:selected'); //undefined

    // attempt 2
    var ddl = outResult.find('#' + ddlId); //object
    var val1 = ddl.val(); //undefined
    var text = ddl.text(); //undefined
    var id = ddl.attr('id'); //undefined
}

how can I get the selected value and text from the dropdown which is in the returned html?

Answer 1

The problem is that you are trying to find an element with id f_pic1 inside #f_pic1 which there isn’t, so just find the selected option.

var ddl = outResult.find('option:selected');