2015-01-21 2 views
1

У меня есть раскрывающийся список с определенными значениями. У меня есть три значения в списке. Если я выберу третий вариант, мне нужно показать div, у которого есть два текстовых поля, которые скрывают их.Показать div, если определенное значение выбрано в раскрывающемся списке Knockout js

Вот мой код: -

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> 

Я хочу, чтобы показать DIV «веса» с полей «lblNumerator» и «lblNumerator», если я выбираю 3-е значение из выпадающего списка список "mProperty".

Я новичок в Knockout и очень ценю любую помощь. Спасибо

+0

Можете ли вы показать ViewModel вы связывающую здесь? –

+0

@G_S Я не могу опубликовать его здесь из-за некоторых ограничений –

+0

Пожалуйста, спросите, не стесняется ли я с моим ответом. – sbedulin

ответ

3

Этот код достаточно близко к вашему 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

Смежные вопросы