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

Question

我有一個系統，其中幾個選擇動態填充ajax調用一個servlet。這些選項在servlet上生成，該選項確定啓用或禁用哪些選項。

一個選擇，我需要啓用一個或多個標記爲禁用的選項。但是，我似乎無法在ajax調用後啓用它們。起初我認爲這可能是一個異步問題，但我處理了這個問題，但仍然無法啓用它們。 （「禁用」，假），嘗試.attr（「禁用」，假），並嘗試.removeAttr（「禁用」）。這些都沒有工作。

呼叫的HTML。對於selEditRun的選項也動態生成的，對應於 「運行」 的數據庫ID值：

<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()並使用此設置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); 
} 

希望有所幫助。