MVC 应用程序未在表单重新编辑中显示选定的值

如何解决MVC 应用程序未在表单重新编辑中显示选定的值

我正在构建一个 Framework7 MVC 应用程序，但发现自己陷入了死胡同。我有一个表格需要评估。此表单包含选择。我正在使用 localStorage 来存储表单值，从这个意义上说，一切正常，我的意思是一切都正确存储。 ¿这是什么问题？当我填写表格时，我会回答一些关于 textareas 输入、选择输入和输入的问题。一切顺利，直到我尝试重新编辑表单，然后所有内容都正确显示在表单上，​​包括我从以前的答案中得到的分数，但是，选择看起来好像我从未接触过它们。他们之前选择的值会被存储但不会显示在表单上。我发现这个问题是由于我已经为选项值设置了数值，但表单显示的是“是”或“否”。如果我将选项值更改为“是”或“否”，那么表单会正确显示，但我需要设置“5”或“0”，因为我需要评估用户的答案。

这是我的代码

表格

<li style="margin-top:-10px;">
<input style="visibility:hidden;height:1px;" value="0" name="choice" onchange="checkTotal()"/>
<input style="visibility:hidden;height:1px;" value="1" type="checkBox" name="choice" onchange="checkTotal()" checked="on">
</li>
<li><div class="item-content">1. ¿Sueles quejarte de sentirte mal?</div>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<select name="pr1" id="pr1" onchange="checkTotal()">
<option class="item-inner" value="5">No</option>
<option class="item-inner" value="0">Si</option>
</select>
</div>
</div>
</div>
<div class="item-content">En tal caso,</div>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<textarea class="resizable" id="pr1notes" placeholder="¿cuál es la causa?">{{model.pr1notes}}</textarea>
</div>
</div>
</div>
</li>

editController 上的函数

function init(query){
var protections = JSON.parse(localStorage.getItem("f7Protections"));
if (query && query.id) {
protection = new Protection(_.find(protections,{ id: query.id }));
state.isNew = false;
}
else {
protection = new Protection({ isFavorite: query.isFavorite });
state.isNew = true;
}
View.render({ model: protection,bindings: bindings,state: state,doneCallback: saveProtection });

showSelectedValues();
}

function showSelectedValues(){
var fieldNames = protection.getSelectFields();
for (var i = 0,len = fieldNames.length; i < len; i++) {
var itemname =  fieldNames[i];
var selectObj = document.getElementById(itemname);
if (selectObj!=null) {
var objOptions = selectObj.options;
var selIndex=0;
for (var j = 0,len2 = objOptions.length; j < len2; j++) {
if ((objOptions[j].label).localeCompare(protection[itemname])==0){
selIndex=j;
}
}
selectObj.options[selIndex].setAttribute("selected","selected");
}else{
}
}
}

和模型

Protection.prototype.setValues = function(inputValues,extras) {
for (var i = 0,len = inputValues.length; i < len; i++) {
var item = inputValues[i];
if (item.type === 'checkBox') {
this[item.id] = item.checked;
}
else {
this[item.id] = item.value;
}

}

for (var i = 0,len = extras[0].length; i < len; i++) {
var item = extras[0][i];
if((item.id).localeCompare("pr1notes")==0)   {this[item.id] = item.value;}

}

console.log('starting loop for extras 3...');
for (var i = 0,len = extras[2].length; i < len; i++) {
var item = extras[2][i];

this[item.name] = item.value;

}

};

Protection.prototype.validate = function() {
var result = true;
if (_.isEmpty(this.prdate)
) {result = false;}
return result;
};

Protection.prototype.getSelectFields = function() {
    return ['pr1'];

}

为了在选择选项上保留“5”或“0”值，同时表单选项仍然向用户显示“是”或“否”，我应该如何更改：<select name="pr1" id="pr1" onchange="checkTotal()"><option class="item-inner" value="5">No</option><option class="item-inner" value="0">Si</option></select>？

还需要其他什么来帮助您理解问题吗？