無法啟用動態生成的選擇選項

Question

我有一個系統，其中使用對servlet的ajax調用來動態填充多個選擇。 這些選項在servlet上生成，該servlet確定啟用或禁用了哪些選項。

一個選擇，我需要啟用一個或多個標記為禁用的選項。 但是，在ajax調用之后，我似乎無法啟用它們。 起初我以為這可能是一個異步問題，但是我已經解決了，但仍然無法啟用它們。

我試過.prop（“ disabled”，false），試過.attr（“ disabled”，false），然后試過.removeAttr（“ disabled”）。 這些都不起作用。

呼叫的HTML。 selEditRun的選項也是動態生成的，其值對應於“運行”的數據庫標識：

    <select id="selEditRun" onchange="populateEditRun()">
        <option value="">&nbsp;</option>
    </select>

使用Javascript：

function populateEditRun() {
    var id = $('#selEditRun').val();
    $.ajax({
        url: 'TCAUServlet',
        type: 'GET',
        data: {
            formType: 'getRun',
            id: id
        },
        dataType: 'html',
        success: function (responseText) {
            responseText = $.parseJSON(responseText);
            var deputies = responseText.officersAssigned;
            //other field actions removed
            var tmpDate = $('#txtEditRunDateTime').val();
            $.when(updateDisablesLists(tmpDate)).done(function () {
                enableOptions(deputies);
            });
        },
        error: function (request, status, error) {
            alert("An error occurred.  Error:  " + status + ", " + error);
        }
    });
}

function updateOfficerWithDisables(d) {
    $.ajax({
        url: 'TCAUServlet',
        type: 'GET',
        data: {formType: "getOfficersWithDisables",
            date: d
        },
        dataType: 'html',
        success: function (responseText) {
            $('#selEditRunDeputies').html(responseText);
            //other select population removed
        },
        error: function (request, status, error) {
            alert("An error occurred.  Error:  " + status + ", " + error);
        }
    });
}

function enableOptions(deputies) {
    var tmpArray = [];
    $.each(deputies, function (name, value) {
        tmpArray.push(value.id); //get option values that are to be enabled
        $("#selEditRunDeputies option[value='" + value.id + "']").attr("disabled", false); //set to enabled
    });
    $('#selEditRunDeputies').val(tmpArray);  //set the appropriate field(s) selected)
}

function updateDisablesLists(val) {
    var d = convertDatePickerToDate(val);
    updateOfficerWithDisables(d);
}

最后，在servlet上：

private String getOfficersWithDisables(HttpServletRequest request) throws ClassNotFoundException, SQLException, ParseException {
    SimpleDateFormat sdf = new SimpleDateFormat("dd MMM yyyy");
    String htmlString = "<option value=''>&nbsp;</option>\n";
    List<Officer> officerList = TCAUDatabaseUtil.getOfficers();
    String dateString = request.getParameter("date");

    Date d = sdf.parse(dateString);
    Calendar cal = Calendar.getInstance();
    cal.setTime(d);
    int dayOfWeek = cal.get(Calendar.DAY_OF_WEEK);

    for (Officer officer : officerList) {
        boolean hasRun = !(TCAUDatabaseUtil.getRunName(d, officer.getId()).equals(""));
        boolean hasAppt = TCAUDatabaseUtil.hasAppt(d, officer.getId());
        boolean isReserveDay = (dayOfWeek == convertTCAUDayToCalendarDay(officer.getRd1()) || dayOfWeek == convertTCAUDayToCalendarDay(officer.getRd2()));
        boolean isAssigned = !(TCAUDatabaseUtil.getAttendanceEvent(d, officer.getId()).equals(""));
        boolean isDisabled = (hasAppt || hasRun || isReserveDay || isAssigned);

        htmlString += "<option value='" + officer.getId()+ "'" + (isDisabled?" disabled":"") + ">" + officer.getDisplayName() + "</option>";
    }
    return htmlString;
}

我意識到這是很多要發布的代碼（在這里大聲地發布太多代碼），但是我不知道我在哪里搞砸。

Answer 1

我無法弄清楚您要解釋的邏輯。 沒什么大不了的，這個問題歸結為啟用和禁用選項。 我認為您的問題與格式化有關。

考慮以下：

<select>
  <option>1</option>
  <option disabled>2</option>
</select>

這是有效的，但也是速記。 option元素具有以下屬性（ link ）：

Attribute  Value     Description
---------------------------------
disabled   disabled  Specifies that an option should be disabled
label      text      Specifies a shorter label for an option
selected   selected  Specifies that an option should be pre-selected when the page loads
value      text      Specifies the value to be sent to a server

因此，更有效的方法如下：

<select>
  <option>1</option>
  <option disabled="disabled">2</option>
</select>

現在，您可以.prop()調用.prop() ，並使用此方法將disabled設置為true或false 。

工作示例： https : //jsfiddle.net/Twisty/2xj18jk9/

ASP

private String getOfficersWithDisables(HttpServletRequest request) throws ClassNotFoundException, SQLException, ParseException {
    SimpleDateFormat sdf = new SimpleDateFormat("dd MMM yyyy");
    String htmlString = "<option value=''>&nbsp;</option>\n";
    List<Officer> officerList = TCAUDatabaseUtil.getOfficers();
    String dateString = request.getParameter("date");

    Date d = sdf.parse(dateString);
    Calendar cal = Calendar.getInstance();
    cal.setTime(d);
    int dayOfWeek = cal.get(Calendar.DAY_OF_WEEK);

    for (Officer officer : officerList) {
        boolean hasRun = !(TCAUDatabaseUtil.getRunName(d, officer.getId()).equals(""));
        boolean hasAppt = TCAUDatabaseUtil.hasAppt(d, officer.getId());
        boolean isReserveDay = (dayOfWeek == convertTCAUDayToCalendarDay(officer.getRd1()) || dayOfWeek == convertTCAUDayToCalendarDay(officer.getRd2()));
        boolean isAssigned = !(TCAUDatabaseUtil.getAttendanceEvent(d, officer.getId()).equals(""));
        boolean isDisabled = (hasAppt || hasRun || isReserveDay || isAssigned);

        htmlString += "<option value='" + officer.getId()+ "'" + (isDisabled?" disabled='disabled'":"") + ">" + officer.getDisplayName() + "</option>";
    }
    return htmlString;
}

JavaScript的

function enableOptions(deputies) {
  var tmpArray = [];
  $.each(deputies, function(name, value) {
    tmpArray.push(value.id); //get option values that are to be enabled
    $("#selEditRunDeputies option[value='" + value.id + "']").prop("disabled", false); //set to enabled
  });
  $('#selEditRunDeputies').val(tmpArray);
}

希望能有所幫助。