Выберите параметры, отсутствующие после отправки HTML-формы

Question

У меня есть форма, где я использую KnockoutJS для динамического заполнения нескольких цепочек SELECT OPTIONS, но когда я submit форма, выбранные значения не включены в запрос GET на сервер. Вот пример HTML, который имеет регулярный HTML и опционов, Нокаут SELECT:

<form name=mainForm action="" method="GET" data-bind="submit: onSubmit"> 
    <input type=hidden name=hiddenId /> 
    <select name=htmlSelectName> 
     <option>One</option> 
     <option>Two</option> 
     <option>Three</option> 
    </select> 
    <select name=koSelectName id=koSelectId 
        data-bind="options: myOptions, 
           optionsCaption: 'Select...', 
           optionsText: 'optionText', 
           value: 'optionId'">     
    </select> 
    <input type="submit" value="Submit"> 
</form> 

<script src="koViewModel/hidden.js" type="text/javascript"></script> 

С запросом GET, вы можете увидеть параметры из htmlSelect установлены обратно на сервер, но раздел koSelect не отправляется по умолчанию. Я написал onSubmit связывания, который копирует значения koSelect в скрытом поле, который не отправлялись обратно на сервер:

var selectOptions = [ 
    { 
     optionId : "A100", 
     optionText: "Option A", 
    }, 
    { 
     optionId : "B200", 
     optionText: "Option B", 
    } 
]; 

var viewModel = function(someOptions) { 
    var self = this; 
    self.myOptions = someOptions; 
    self.selectedOption = ko.observable(); 
    console.log("Sending Option: " + self.selectedOption); 

    self.onSubmit = function() { 
     var k = document.getElementById("koSelectId"); 

     document.mainForm.hiddenId.value = selectOptions[k.selectedIndex-1].optionId; 

     alert("Got Knockout Option ("+k.selectedIndex+"): " + k.options[k.selectedIndex].text); 
     console.log("Got Knockout Option ("+k.selectedIndex+"): " + k.options[k.selectedIndex].text); 
     console.log("Got Knockout Value ("+k.selectedIndex+"): " + document.mainForm.hiddenId.value); 
     confirm("Click OK after reviewing the console output. Then examine the GET params."); 
     return true; 
    } 
} 

ko.applyBindings(new viewModel(selectOptions)); 

Результат со строкой GET запроса является:

myapp?hiddenId=A100&htmlSelectName=Three&koSelectName= 

Но есть более простой способ получить варианты выбора KO, возвращенные при отправке без копирования в скрытое поле?

Answer 1

Вы перепутали две вещи в том, как select должны быть обработаны с KO:

• value (или selectedOptions для множественного выбора) является наблюдаемое холдинговая значение, выбранное пользователем, и необходимо, чтобы сделать что-то отмечено как выбрано - вы используете optionId, но, вероятно, предназначено для использования еще не существующего наблюдаемого.
• optionsValue для маркировки собственности на вашей модели представления, которые будут использоваться в качестве атрибута value на option с - вы отсутствующей это свойство, но, вероятно, означало использовать optionId.

Вот пример, который работает, как ожидалось:

<form name="mainForm" action="" method="GET" data-bind="submit: onSubmit"> 
    <select name="koSelectName" 
      data-bind="options: myOptions, 
        optionsCaption: 'Select...', 
        optionsText: 'optionText', 
        optionsValue: 'optionId', 
        value: 'selectedOption'">     
    </select> 
    <input type="submit" value="Submit"> 
</form> 

var selectOptions = [ 
    { 
    optionId : "A100", 
    optionText: "Option A", 
    }, 
    { 
    optionId : "B200", 
    optionText: "Option B", 
    } 
]; 

var viewModel = function(someOptions) { 
    var self = this; 
    self.myOptions = someOptions; 
    self.selectedOption = ko.observable(); 
    self.onSubmit = function() { 
    console.log(document.body.innerHTML); 
    return true; 
    } 
} 

ko.applyBindings(new viewModel(selectOptions));