Javascript 敲除绑定文本框以选择文本

最近我开始学习前端开发，所以如果这个问题太愚蠢，请不要感到惊讶。 我试图做的是绑定textbox来选择文本，而不是它的id

这是我的HTML：

<div data-bind="foreach: objects()">
  <input type="text" data-bind="value: type" />  
  <button type="button" data-bind="click: $parent.removeObject">-</button>
</div>
<div>
  <select data-bind="options: types, optionsValue: 'id', optionsText: 'title', optionsCaption: 'Type...', value: itemToAdd().type"></select>  
  <button id="create-object-button" type="button" data-bind="click: addObject">+</button>
</div>

问题是，我想在文本框中显示

2

而不是

2

，但同时这是应该提交的表单的一部分，在表单提交时，我想提交

2

值，因为在实际应用程序中，它是java枚举名

---

如果这个问题太麻烦，谢谢你，对不起。

对不起，我不能肯定你想要的是什么，但可能是这样的？

js

html

:

-


+

对不起，我不能肯定你想要的是什么，但可能是这样的？

js

html

:

-


+

function model() {
  var self = this;

  self.objects = ko.observableArray();
  self.types = ko.observableArray([new Type(1, 'one'), new Type(2, 'two'), new Type(3, 'three')]);
  self.itemToAdd = ko.observable(new Object());

  self.addObject = function() {
    self.objects.push(self.itemToAdd());
    self.itemToAdd(new Object());
  };

  self.removeObject = function(object) {
    self.objects.remove(object);
  };

  function Object(type) {
    var self = this;
    self.type = type;
  }

  function Type(id, title) {
    var self = this;
    self.id = id;
    self.title = title;
  }
};

ko.applyBindings(new model());

function type(id, title) {
  var self = this;
  self.id = ko.observable(id);
  self.title = ko.observable(title);
};

var initialArray = [
  new type(1, 'one'),
  new type(2, 'two'),
  new type(3, 'three')
]


function model() {
  var self = this;

  self.types = ko.observableArray(initialArray);
  self.options = ko.observableArray(initialArray);
  self.selectedtype = ko.observable('');
  self.removeObject = function(p) {
    self.types.remove(p);
  }
  self.addObject = function() {
    self.types.push(new type(
      self.selectedtype().id(),
      self.selectedtype().title()));
  }
}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
});

<div data-bind="foreach: types">
  <p>
    <span data-bind="text: id"></span>:
    <input type="text" data-bind="value: title" />
    <button data-bind="click: $parent.removeObject">
  </p>

  -
  </button>

</div>
<br/>
<select data-bind="options: options,
                       optionsText: 'title',
                       value: selectedtype,
                       optionsCaption: 'Choose...'"></select>
<button data-bind="click: addObject">+</button>

</button>