如果从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 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

如果从Dropdown Knockout js中选择了某个值，则显示div

相关推荐