How to retrieve the value of the selected option from a dynamically created select in a table

Question

I am dynamically creating a dropdown list in a table and want to retrieve the value of the selected item. I can get the value of other elements (eg, input); however the dropdown has me stumped. In the below code the startDate is correct however parRating is always 1 (the first value in the select).

Note: I want the value (parIdArray) not the val (parRatingArray).

HTML for creating:

html += "<td style='width : 1%; white-space: nowrap;'><select name='parRating'>"
for (let i = 0; i <= paraArray; i++) {
    if (this.parRating  == parRatingArray[i]) {
        // set the current option to this.parRating 
        html += "<option selected name='parRatingOption' value='" + parIdArray[i] + "'>" + parRatingArray[i] + "</option>"
    }else {
        html += "<option name='parRatingOption' value='" + parIdArray[i] + "'>" + parRatingArray[i] + "</option>"
    }
};
html += "</select></td>";

if (this.patparStartDate == null) {
    html += "<td style='width : 1%; white-space: nowrap;'><input type='date' name='startDate' value=''></td>";
}else {
    html += "<td style='width : 1%; white-space: nowrap;'><input type='date' name='startDate' value='" + this.patparStartDate + "'></td>";
}

HTML to retrieve values:

var parRating = $(this).parents('tr:first').find('option[name="parRatingOption"]').value;
alert("parRating: " + parRating);//always 1
var startDate = $(this).parents('tr:first').find('input[name="startDate"]').val();

Answer 1

You just need to target the option selected in your code above using the jQuery :selected selector:

Also you need to use .val() to get the option value not the value attribute in jQuery

Try this code below:

var parRating = $(this).parents('tr:first').find('option[name="parRatingOption"]:selected').val();