Question

HTML：

 <div>
    <div id="filter-drop-down" tabindex="1">
        <span data-bind="text:selected_Auth()"></span>
        <ul class="dropdown" data-bind="foreach:selectList">
            <li><a href="#" data-bind="text:name.toLowerCase(),click:$parent.addToRightList,css:{'selected-filter':$parent.selected_Auth==name}"></a></li>
        </ul>
    </div>
    <div id="filter-drop-down1" data-bind="with:rightList" tabindex="1">
        <span data-bind="text:selected_Book.toLowerCase()"></span>
        <ul class="dropdown" data-bind="foreach:selectList">
            <li><a href="#" data-bind="text:DscName.toLowerCase(),click:$parent.selected_Book.bind($root,DscName),css:{'selected-filter':$root.selected_Book()==DscName}"></a></li>
        </ul>
    </div>
</div>

JS：

function view_model() {
  var self = this;
  self.all_consultants = ko.observableArray();
  self.selected_Auth = ko.observable("all Author");
  self.selected_Book = ko.observable("all books");
  self.selectList = ko.observableArray([{
    name: "J.K R",
    DscName: [
      "HP1", "HP2", "HP3"
    ]
  }, {
    name: "shakespeare",
    DscName: [
      "Hamlet", "Othello"
    ]
  }]);

  //if (self.auth_header()) {
  //  get_list_data();
  //}

  self.rightList = ko.observable();
  self.addToRightList = function(list) {
    self.rightList(list);
  };

}
ko.applyBindings(new view_model());

需要下拉式功能在第一个列表中作者选择用书籍填充2个列表，如果只有一本书，那么应该自动选择。

Answer 1

你没有对你的问题提供太多帮助的原因是它出现了＆＃34;为我写了一些代码＆＃34;而不是＆＃34;我正在尝试这样做并遇到一个特定的问题。＆＃34; StackOverflow旨在帮助您理解事物，而不只是提供一些代码让其他人使其工作。

您提供的代码有很多错误。我编辑了你的问题，以摆脱语法错误，使其至少可以运行。下面我已经找出了一些问题来制作你想要的依赖。

有些注意事项：

您无法直接在观察对象上使用toLowerCase，您必须获取其内容，因此selected_Book().toLowerCase()，而不是selected_Book.toLowerCase()
您必须注意绑定上下文。 rightList不包含selectList成员;它有一个DscName，这应该在第二个foreach中使用。绑定上下文是我必须将$root放在许多事情上的原因。
如果遇到多个要求的问题，请将其分解。也许你应该解决的第一件事是如何成功显示两个列表。然后开始构建第一个列表。

＆＃13;

function view_model() {
  var self = this;
  self.all_consultants = ko.observableArray();
  self.selected_Auth = ko.observable("all Author");
  self.selected_Book = ko.observable("all books");
  self.selectList = ko.observableArray([{
    name: "J.K R",
    DscName: [
      "HP1", "HP2", "HP3"
    ]
  }, {
    name: "shakespeare",
    DscName: [
      "Hamlet", "Othello"
    ]
  }]);

  //if (self.auth_header()) {
  //  get_list_data();
  //}

  self.rightList = ko.observable();
  self.addToRightList = function(list) {
    self.rightList(list);
  };

}
ko.applyBindings(new view_model());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
    <div id="filter-drop-down" tabindex="1">
        <span data-bind="text:selected_Auth()"></span>
        <ul class="dropdown" data-bind="foreach:selectList">
            <li><a href="#" data-bind="text:name.toLowerCase(),
              click:$parent.addToRightList,
              css:{'selected-filter':$parent.selected_Auth==name}"></a></li>
        </ul>
    </div>
    <div id="filter-drop-down1" tabindex="1" data-bind="with: rightList">
        <span data-bind="text:$root.selected_Book().toLowerCase()"></span>
        <ul class="dropdown" data-bind="foreach:DscName">
            <li><a href="#" data-bind="text:$data.toLowerCase(),
              click:$root.selected_Book.bind($root,$data),
              css:{'selected-filter':$root.selected_Book()==$data}"></a></li>
        </ul>
    </div>
</div>

＆＃13;

如何使用KnockoutJs实现List的级联下拉功能

1 个答案: