在下拉菜單中設置默認值

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