.selectedIndex填表错误的几个问题

Question

我创建了一个小测验作为一个表单，结果是在单击表单后出现的。每个结果都是一个值。我需要用Marketo生成的形式填充结果(现在不需要对marketo的了解)。所以这些值需要在点击后显示出来，这很好，我已经显示了值，但是它是不正确的值。

由于某种原因无法调用与值相对应的正确索引。有什么帮助吗？

表格代码：

<select id="personaBucket" name="personaBucket" class="mktoField mktoHasWidth mktoRequired" style="width: 300px;">
<option value="">I need to work on...</option>
<option value="Customer">Customer</option>
<option value="Compliance">Compliance</option>
<option value="Continuity">Continuity</option>
</select>

JS (为测验结果分配值)：

if (customer < continuity && customer < compliance) {
        result = customer;
       } else if (compliance < continuity && compliance < customer) {
        result = compliance;
       } else if (continuity < compliance && continuity < customer) {
        result = continuity;
       } else {
        result = continuity;
       }

    grading = [
       {score:customer,value:"customer",feedback:"You need to work on customer experience. Fill out the form below to learn more."},
       {score:compliance,value:"compliance",feedback:"You need to work on compliance. Fill out the form below to learn more."},
       {score:continuity,value:"continuity",feedback:"You need to work on continuity. Fill out the form below to learn more."}
       ];

JS (具有与测试结果对应的值)：

var select = document.getElementById("personaBucket");
    var persona = "Persona is: ";
    var i;
    for (i = 0; i < select.length; i++) {
        persona=persona + "\n" + select.options[i].text + " has index: " + select.options[i].index;
    }
    console.log(persona);

    for (i = 0; i < select.length; i++) {
    var selectNone = function () {
        document.getElementById("personaBucket").selectedIndex = "0"; 
    };
    var selectCustomer = function () {
        document.getElementById("personaBucket").selectedIndex = "1"; 
    };
    var selectCompliance = function () {
        document.getElementById("personaBucket").selectedIndex = "2"; 
    };
    var selectContinuity = function () {
        document.getElementById("personaBucket").selectedIndex = "3";
    };
    }

    for(i=0; i<grading.length; i++) {
    if(result == grading[i].score) {
    if (grading[i].value = customer) { 
        selectCustomer ();
        }
    else if (grading[i].value = compliance) { 
        selectCompliance ();
    }
    else if (grading[i].value = continuity) { 
        selectContinuity ();
    }
    else { 
        selectContinuity ();
    }
}
}

尽管我打电话来是为了纠正索引#，但是这个索引是错误的。

编辑：摆脱了selectIndex，但最大的问题是，我没有在下面放置"“值，就像下面提到的那样，用==替换=。所以，我换了这个：

for(i=0; i<grading.length; i++) {
    if(result == grading[i].score) {
    if (grading[i].value = customer) { 
        selectCustomer ();
        }
    else if (grading[i].value = compliance) { 
        selectCompliance ();
    }
    else if (grading[i].value = continuity) { 
        selectContinuity ();
    }
    else { 
        selectContinuity ();
    }
}
}

在这方面：

for(i=0; i<grading.length; i++) {
        if(result == grading[i].score) {
            personaVal = grading[i].value;
        }
    }

    if ( personaVal == "customer" ) {
    $('#personaBucket').children().remove().end().append('<option selected value="customer">Customer</option>') ;
    }
    if ( personaVal == "compliance" ) {
    $('#personaBucket').children().remove().end().append('<option selected value="compliance">Compliance</option>') ;
    }
    if ( personaVal == "continuity" ) {
    $('#personaBucket').children().remove().end().append('<option selected value="continuity">Continuity</option>') ;
    }

现在工作得很好，谢谢你的帮助！

Answer 1

仅仅设置value of <select>比处理selectedIndex要容易得多

select.value = 'Customer';

当我们完成这个任务时，您的所有函数所做的事情几乎是完全相同的--最好让这个函数接受一个索引，然后返回包含闭包中的索引的另一个函数：

function setSelectValue(val) {
   return function() {
      select.value = val;
   }
}
var selectContinuity = setSelectValue('Customer');
var selectCustomer = setSelectValue('Continuity');

还有一点，赋值与比较是不一样的：

if (grading[i].value = customer) { 

除非customer是falsey，否则它总是返回true，因为赋值语句返回正在设置的值。您至少应该使用==进行比较，但是使用===检查值和相等值的类型要好得多。

Answer 2

去掉了selectIndex，但最大的问题是，我没有在我的值下面加上"“，就像Rob提到的那样，用==替换=。所以，我换了这个：

for(i=0; i<grading.length; i++) {
    if(result == grading[i].score) {
    if (grading[i].value = customer) { 
        selectCustomer ();
        }
    else if (grading[i].value = compliance) { 
        selectCompliance ();
    }
    else if (grading[i].value = continuity) { 
        selectContinuity ();
    }
    else { 
        selectContinuity ();
    }
}
}

在这方面：

for(i=0; i<grading.length; i++) {
        if(result == grading[i].score) {
            personaVal = grading[i].value;
        }
    }

    if ( personaVal == "customer" ) {
    $('#personaBucket').children().remove().end().append('<option selected value="customer">Customer</option>') ;
    }
    if ( personaVal == "compliance" ) {
    $('#personaBucket').children().remove().end().append('<option selected value="compliance">Compliance</option>') ;
    }
    if ( personaVal == "continuity" ) {
    $('#personaBucket').children().remove().end().append('<option selected value="continuity">Continuity</option>') ;
    }

谢谢你的帮助！