0

我想根据另一个值禁用或启用选择菜单中的某些选项。在示例中，用户将输入一个权重（在 stepOne 页面上），如果该值大于 3，则必须禁用选项“quad”（在 stepTwo 页面上）。如果该值小于或等于 3，则必须启用选项“quad”。

html 包含一个权重输入，然后是一个触发 stepOneSubmission 的提交按钮。下面的代码发生的情况是，如果权重高于 3，则页面不会改变 - 我认为它在刷新时卡住了 - 可能是因为尚未创建选择菜单因此无法刷新？？？。如果用户输入的权重低于 3，则页面更改为 stepTwo 有效。如果用户随后导航回 stepOne 并输入大于 3 的权重，则 stepOne 提交这次有效，并且“quad”被禁用。

function stepOneSubmission() {
var weight = $('#weight').val();
$('#weightTwo').val(weight);
var strengthSelect=$("#strength");
if (weight>3)
{
$("#strength option[value=4]").prop('disabled',true);
strengthSelect.selectmenu("refresh");
$.mobile.pageContainer.pagecontainer("change", "#stepTwo");
}
$.mobile.pageContainer.pagecontainer("change", "#stepTwo");
};
function stepTwoSubmission() {
$.mobile.pageContainer.pagecontainer("change", "#theReport");
};
4

1 回答 1

0

我用上述方法没有成功。相反，我将选择选项更改从表单提交中分离出来。我创建了一个新函数 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");
};
于 2014-06-18T21:47:19.007 回答