How to remove an item from DropDownList If No is Selected on Bootstrap Modal?-CodePudding

Scenario: User will select from a DropdownList. Here is the Dropdown code:

     @Html.DropDownList("ddlRequestMade", new List<SelectListItem>
                                {
                                   new SelectListItem{ Text="Please Select", Value = "Please Select" },
                                   new SelectListItem{ Text="Stuff", Value = "Stuff" },
                                   new SelectListItem{ Text="Card", Value = "Card" },
                                }, new { @class = "form-control" })

If User Select 'Card' option in Dropdown, a Bootstrap Modal Appear:

Basic Modal code:

         <!-- Modal -->
<div  id="myModal">
    <div >
        <div >
            <!-- Modal header -->
            <div >
                <h4 >Card?</h4>
            </div>
            <!-- Modal body -->
            <div >
                Confirm ?
            </div>
            <!-- Modal footer -->
            <div >
                <button type="button"  data-dismiss="modal">Yes</button>
                <button type="button"  data-dismiss="modal">No</button>
            </div>

        </div>
    </div>
</div>

When User click on No, Modal should close, and preferably remove the 'Card' option from the dropdown list. How can this be achieved using javascript?

Here is my js code to show the modal:

    $(function () {
    $("#ddlRequestMade").change(function () {
        if ($(this).val() == "Card") {
            $("#dvToShowOrHide").show();
            $("#dvToShowOrHideP2").show();
            $("#myModal").modal('show');
        } else {
            $("#dvToShowOrHide").hide();
            $("#dvToShowOrHideP2").hide();
        }
    });
});
$("button[data-dismiss=modal]").click(function () {
    $(".modal").modal('hide');
});

CodePudding user response：

for remove option from select

$("button[data-dismiss=modal]").click(function () {
    $(".modal").modal('hide');
    $("#ddlRequestMade option[value='Card']").remove();
    $("#ddlRequestMade").val('Please Select');
});