如果從Dropdown Knockout js中選擇了某個值，則顯示div

我有一個包含特定值的下拉列表。我在列表中有三個值。如果我選擇第三個選項，我需要顯示一個具有兩個文本字段的div，否則將其隱藏。如果從Dropdown Knockout js中選擇了某個值，則顯示div

這裏是我的代碼： -

HTML：

<div class="control-group"> 
        <div class="row"> 
         <div class="col-md-3"> 
          <label class="placeholder">{package}.property</label> 
          @Html.DropDownList("mProperty", new SelectList(Enum.GetNames(typeof({package}.property))), new { @class = "form-control", type = "text", id = "mProperty" }) 
         </div> 
         <div id="weights" > 
          <span class="col-md-6" id="lblNumerator" >{package}[email protected]("field1", new SelectList(numerators), new { @class = "form-control numerator-dropdown", type = "text", id = "field1" })</span><br /> 
          <span class="col-md-6" id="lblDenominator">{package}.property3 @Html.DropDownList("field2", new SelectList(denominators), new { @class = "form-control", type = "text", id = "field2" })</span> 
         </div> 
         <br /> 
         <br /> 
         <div class="row"> 
          <div class="col-md-12"> 
           <label class="placeholder">Account</label> 
           @Html.DropDownList("field0", new SelectList(accounts), new { @class = "form-control allaccounts-dropdown", type = "text", id = "field0" }) 

          </div> 
         </div> 
        </div>

我想顯示格「權」包含字段「lblNumerator」和「lblNumerator」如果我選擇從下拉列表中第3個值列出「mProperty」。

我是Knockout新手，非常感謝您的幫助。謝謝

來源

2015-01-21 iam stack

你能告訴你在這裏結合的視圖模型？ – 2015-01-21 05:42:54

@G_S由於某些限制，我無法在此發佈 – 2015-01-21 06:17:02

請問我的答案是否與......不清楚。 – sbedulin 2015-01-27 15:12:04

這段代碼已經足夠接近你的Razor-html了，我想這個想法很明確。

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 

    <body> 
    <select data-bind="selectedOptions: options"> 
     <option value="option 1" selected>Option 1</option> 
     <option value="option 2">Option 2</option> 
     <option value="option 3">Option 3</option> 
    </select> 


    <div data-bind="visible: shouldShowText"> 
     <h2>some hidden text</h2> 
    </div> 

    <hr /> 

    <div data-bind="text: ko.toJSON(viewModel)"></div> 

    <script src="knockout.js"></script> 
    <script> 
     function ViewModel() { 
     var availableOptions = document.querySelectorAll('option'); 
     availableOptions = Array.prototype.map.call(availableOptions, function(o) { return o.value; }) 

     var firstOption = availableOptions[0]; 

     this.options = ko.observableArray([firstOption]); 
     this.shouldShowText = ko.computed(function() { 
      var selectedOption = this.options()[0]; 
      return availableOptions.indexOf(selectedOption) === 2; 
     }, this); 
     } 

     var viewModel = new ViewModel(); 

     ko.applyBindings(viewModel); 
    </script> 
    </body> 

</html>

工作普拉克是here

來源

2015-01-21 06:48:16 sbedulin

如果從Dropdown Knockout js中選擇了某個值，則顯示div

回答

相關問題