在下拉菜单中设置默认值

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> 

我试着小时google搜索，并已经尝试订阅功能，将可观测到（空）（ “”）和许多其他方式。有人可以帮助我，也可以建议我可以尝试什么方法。非常感谢，并提前多谢。

Answer 1

设置httpauthmode到'0'（的None值）时httprestype变化'2'：

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

JSFiddle

Answer 2

你应该非常不同的方法处理这个。仔细阅读options binding documentation，然后尝试将代码修改为该方法。基本上它允许你将数据绑定到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'" />