Question

我正在开发一个网页，其中包含大约8个html控件和一个html按钮，使用该按钮可以在单击按钮时提交8个html控件中的数据。一旦使用JavaScript单击按钮，我试图清除所有8个字段，并且我有以下脚本

HTML页面

<td>
     <select id="cbxProduct" data-bind="options: $root.productNames, optionsText: 'ProductName', optionsValue: 'ProductName', value: selectedChoice, optionsCaption: 'Product'">
     </select>
</td>
<td>
     <select id="cbxTerm" data-bind="options: $root.termNames, optionsText: 'TermName', optionsValue: 'TermName', enable: selectedChoice, value: selectedTerm, optionsCaption: 'Term'">
     </select>
</td>
<td>
     <input type="text" id="txbBVolume" placeholder="Bid Volume"  data-bind="value:     bidVolume" />
</td>
<td>
     <select id="cbxBCP" data-bind="options: $root.counterpartyNames, optionsText: 'CounterPartyName', optionsValue: 'CounterPartyName', value: selectedBidCounterParty, optionsCaption: 'Bid CP'">
     </select>
</td>
<td>
     <input type="text" id="txbB" placeholder="Bid" data-bind="value: bid" />
</td>
<td>
    <input type="text" id="txbO" placeholder="Offer" data-bind="value: offer" />
</td>
<td>
     <select id="cbxOCP" data-bind="options: $root.counterpartyNames, optionsText: 'CounterPartyName', optionsValue: 'CounterPartyName', value: selectedOfferCounterParty, optionsCaption: 'Offer CP'">
     </select>
</td>
<td>
    <input type="text" id="txbOVolume" placeholder="Offer Volume" data-  bind="value: offerVolume" />
</td>

<td >
     <input type="button"  class="btn btn-success" data-bind="      click: clear" value="Add New Entry" />
</td>
@section scripts {
 <script src="~/App/ClearAllFields.js"></script>
}

Knockout JS

self.add = function (cc) {
    var payload = {
        Term: this.selectedTerm(), Product: this.selectedChoice(), 
        BidCP: this.selectedBidCounterParty(), BidVolume: (this.bidVolume() == "") ? null : this.bidVolume(),  Bid: (this.bid() == "") ? null : this.bid(), Offer: (this.offer() == "") ? null : this.offer(),
        OfferVolume: (this.offerVolume() == "") ? null : this.offerVolume(), OfferCP: this.selectedOfferCounterParty(), Locked: false, Sequence: "", TermID: 0, ProductID: 0
    };
    $.ajax({
        url: '/odata/CC',
        type: 'POST',
        //  data: ko.toJSON(payload),
        data: JSON.stringify(payload),
        contentType: 'application/json',
        dataType: 'json'
    });

    this.selectedChoice("Product");
    this.selectedTerm("Term");
    this.selectedBidCounterParty("Bid CP");
    this.bVolume("");
    this.bid("");
    this.offer("");
    this.oVolume("");
    this.selectedOfferCounterParty("Offer CP");
}

我认为一切都很好，它清除了TextBox字段，但没有清除下拉框。

例如，我通过点击product=abc, term=fall, bVolume=5, BCP=X, Bid=10, Offer=12, OCP=C, OVolume=6按钮提交了"Add new entry"，点击按钮后，它会提交数据并清除所有文本框字段bVolume，Bid，Offer，oVolume并离开下拉框，因为它们是

Answer 1

将this.selectedChoice("Product");更改为this.selectedChoice("");

顺便说一下，从控件中删除所有id属性，因为：

你不需要它们。
这是针对KnockoutJS的原则。
你不需要它们。：）

修改

将this.selectedChoice("Product");更改为this.selectedChoice(null);

工作演示：http://jsfiddle.net/DianaNassar/e35aU/1/

Answer 2

您需要添加值绑定：

<select id="cbxProduct" data-bind="options: $root.productNames, value: selectedChoice">
</select>

以下是如何重置下拉菜单的快速演示：

http://jsfiddle.net/4hVf4/

onClick事件在单击html按钮时无效

2 个答案: