JQuery Mobile : 선택 메뉴를 비활성화하고 다시 활성화하고 새로 고칩니다.

Question

다른 값을 기반으로 선택 메뉴에서 특정 옵션을 비활성화하거나 활성화하려고합니다. 예제에서 사용자는 가중치를 입력하고 (stepOne 페이지에서) 그 값이 3보다 큰 경우 "quad"옵션을 비활성화해야합니다. 값이 3보다 작거나 같으면 옵션 "quad"가 사용 가능해야합니다.

html에는 가중치 입력이 포함되어 있으며 제출 버튼은 stepOneSubmission을 트리거합니다. 아래의 코드는 무게가 3을 초과하면 페이지가 변경되지 않는다는 것을 의미합니다. 선택 메뉴가 아직 생성되지 않았기 때문에 새로 고침이 어려워 질 수 있습니다. 따라서 새로 고칠 수 없습니다. 사용자가 3 미만의 가중치를 입력하면 stepTwo로 페이지가 변경됩니다. 그런 다음 사용자가 stepOne으로 돌아가서 3을 초과하는 가중치를 입력하면 stepOne 제출이이 시간에 작동하고 "쿼드"가 비활성화됩니다.

Answer 1

나는 위의 방법으로 성공하지 못했습니다. 대신 양식 제출에서 선택 옵션 변경 사항을 분리했습니다. 나는 새로운 기능인 setStrengthValues를 만들어서 무게에 따라 선택 옵션을 재구성했으며 무게 필드의 키 위로 움직인다.

function setStrengthValues(){ 

var weight = $('#weight').val(); 
$('#weightTwo').val(weight); 
var strengthSelect=$("#strength"); 
var selectValues = [{"single": "Single", "double": "Double", "quad": "Quad"}]; 
if (weight >= 3) { 
$("#strength").find('option').remove(); 
$(selectValues[0]).each(function (key, value) { 
    $.each(selectValues[0], function (key, value) { 
     strengthSelect 
     .append($("<option></option>") 
     .attr("value", key) 
     .text(value)); 
    }); 
}); 
strengthSelect.find('option:contains(' + selectValues[0].quad + ')').remove(); 
strengthSelect.val('Single'); 
strengthSelect.selectmenu("refresh");  
} 
else { 
    $("#strength").find('option').remove(); 
    $(selectValues[0]).each(function (key, value) { 
     $.each(selectValues[0], function (key, value) { 
     strengthSelect 
     .append($("<option></option>") 
     .attr("value", key) 
     .text(value)); 
    }); 
}); 
strengthSelect.val('Single'); 
strengthSelect.selectmenu("refresh"); 
}  
}; 
function stepOneSubmission() { 
$.mobile.pageContainer.pagecontainer("change", "#stepTwo"); 
};