javascript - 在下拉菜单中设置默认值

Question

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

我想要第二个下拉菜单；当用户选择时，httpauthmode 更改为默认值httpreqtype() == 2;即

      <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>

我尝试了几个小时的谷歌搜索，并且已经尝试了订阅功能，将可观察的设置为(null)，(“”)和许多其他方式。有专家可以帮助我或者建议我可以尝试什么方法吗？真的很感激，并提前非常感谢。

Answer 1

您应该以非常不同的方式处理这个问题。仔细阅读options binding documentation并尝试将您的代码改写为该方法。基本上，它允许您数据绑定(bind) select 标记，并让 option 通过 Knockout 动态呈现。

类似这样的事情:

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'" />