My Javascript is passing the dropdownlistfor value but i need the text selected

This is my drop down:

<div id="ToolList">
<div class="row">
<div class="col-auto" id="ToolList">

@Html.DropDownListFor(contents => Model.Field.FieldID, new SelectList(contents, "ContentID", "Content_Name"), "--Select--", new { @class = "form-control", @style = "height: 38px", @id = "ToolList", @Name = "ToolList" })
@Html.ValidationMessageFor(contents => contents.Content.Content_Name, "", new { @class = "text-danger" })
</div>
</div>
</div>

This is my Javascript:

 $("body").on("click", "#addbtn1", function () {

        var txtskills = $("#ToolList1");
        var txtvalues = $("#GenericDropdown1");
        var txtcomments = $("#comment1");

        var tBody1 = $("#tblSkills1 > tbody")[0];

        var row = tBody1.insertRow(-1);

        var cell = $(row.insertCell(-1));
        cell.html(txtskills.val());

        cell = $(row.insertCell(-1));
        cell.html(txtvalues.val());

        cell = $(row.insertCell(-1));
        cell.html(txtcomments.val());

        cell = $(row.insertCell(-1));
        cell.

        cell = $(row.insertCell(-1));
        var btnRemove = $("<input/>");
        btnRemove.attr("type", "button");
        btnRemove.attr("onclick", "Remove(this);");
        btnRemove.attr("class", "btn btn-link remove")
        btnRemove.attr("style", "font-size: 11px; color:red;")
        btnRemove.val("- Remove");
        cell.append(btnRemove);

        txtskills.val("");
        txtvalues.val("");
        txtcomments.val("")
    });

And this is my resutls, it is passing the value id but i need the text value to display not the number 14 which is the table id any ideas?

rendered page

I’m still learning with javascript but i tried changing val() to Text but no luck