在下拉菜单中设置默认值

Question

我有两个下拉菜单可以操纵。 第二个下拉； httpauthmode由第一个下拉列表中的值； httprestype。

我要第二个下拉列表； 当用户选择httpreqtype（）== 2时，httpauthmode更改为默认值； 即

      <option value="0" selected="selected">None</option>
      //I want the value = 0 be the default value

使用Javascript

  _self.httpreqtype = ko.observable( httpreqtype );
  _self.httpauthmode = ko.observable(null);

这是我的html

  <label>HTTP Request Type</label><br/>
    <select data-bind="value: httpreqtype" style="width:200px">
    <?php 
        foreach($httpRequestOptions as $key=>$val) {
            echo '<option value="'.$val["id"].'" >'.$val["name"].'</option>';
        };
    ?>
    //$httpRequestOptions is an array inside my viewModel, I only put a piece of my code
    </select>

    <label>HTTP Auth Type</label><br />
    <select data-bind="value: httpauthmode" style="width:200px">
        <option value="0" selected="selected">None</option>
        <option value="1">Basic Authentication</option>
        <option value="2" data-bind = "visible: httpreqtype() == 2" >Body Encryption</option>
        <option value="3" data-bind = "visible: httpreqtype() == 2" >Basic Authentication + Body Encryption</option>
    </select>

我尝试了几个小时的搜索，并且已经尝试了订阅功能，将observable设置为（null），（“”））和许多其他方式。 有人可以帮助我，或者建议我可以尝试哪种方法。 非常感谢，并在此先感谢。

Answer 1

您应该采取截然不同的方法。 仔细阅读options绑定文档，并尝试将您的代码改写为该方法。 基本上，它允许您数据绑定select标记，并由Knockout动态呈现option 。

像这样：

 var Model = function(httpreqtype){ var _self = this; _self.httpauthmode = ko.observable(null); _self.httpreqtype = ko.observable( httpreqtype ); _self.httpauthmode = ko.observable(null); var mode0 = { id: 0, txt: "None" }; var mode1 = { id: 1, txt: "Basic Authentication" }; var mode2 = { id: 2, txt: "Body Encryption" }; var mode3 = { id: 3, txt: "Basic Authentication" }; _self.availableHttpAuthModes = ko.computed(function() { if (_self.httpreqtype() == 2) { return [mode0, mode1]; } return [mode0, mode1, mode2, mode3]; }); } ko.applyBindings(new Model(2)); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <select data-bind="value: httpauthmode, optionsText: 'txt', options: availableHttpAuthModes" > </select> <br /><br />Change httpreqtype: <br /><input data-bind="value: httpreqtype, valueUpdate: 'afterkeydown'" /> 

Answer 2

当httprestype更改为'2'时，将httpauthmode设置为'0' （值为None ）：

_self.httprestype.subscribe(function(value) {
    if(value === '2') {
        _self.httpauthmode('0');
    }
});

JSFiddle