动态生成的选择标签选项未由jquery过滤

Question

I dynamically generate the select tag using jstl like below.But I am failed to select the option in jquery.

JSP:

<c:forEach var="p" items="${model.multiphase}" varStatus="row">
    <select class="form-control status" name="status">
        <option value="Notyetstarted">Not Yet Started</option>
        <option value="Inprogress">InProgress</option>
        <option value="Onhold">OnHold</option>
        <option value="Closed">Closed</option>
    </select>
    <input type="hidden" id="upstatus_${row.index}" value="<c:out value='${p.getProjectPhase().getPhaseStatus()}'/>" />
</c:forEach>

the above jstl generates the below html

<select class="form-control status" name="status">
        <option value="Notyetstarted">Not Yet Started</option>
        <option value="Inprogress">InProgress</option>
        <option value="Onhold">OnHold</option>
        <option value="Closed">Closed</option>
    </select>
    <input type="hidden" id="upstatus_0" value="Closed" />
 <select class="form-control status" name="status">
        <option value="Notyetstarted">Not Yet Started</option>
        <option value="Inprogress">InProgress</option>
        <option value="Onhold">OnHold</option>
        <option value="Closed">Closed</option>
    </select>
    <input type="hidden" id="upstatus_1" value="Onhold" />

I have used below jquery for selecting the option.

$(".status option").each(function () {
    alert("fd");

    $(this).find("option").filter(function () {

        return $(this).val() == $("#upstatus_" + index).val();

    }).prop('selected', true);
});

How to preselect the value? Any help will be greatly Appreciated!!!

Answer 1

change to this:

$(".status").each(function () {
    var that = $(this);
    $(this).find('option').filter(function (index) {
        console.log($(this).parent().next(":hidden").val());
        return $(this).val() === that.next(":hidden").val()
    }).prop('selected', true);
});

Sample Demo

Updated Sample Demo

---

-> : jquery not enters in the alert.

because you have .each() iteration on the option not on the select element.

---

Although you can change to this also:

$(".status").each(function (i) { // add a index "i" here
    $(this).find('option').filter(function () {
        return $(this).val() === $("#upstatus_"+i).val() // use that here
    }).prop('selected', true);
});

Sample for this.