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

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 (e.g., 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();

CodePudding user response：

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();