我正在处理一个数据表，该表由三种方式中的一种填充。 1.实时搜索 2.选择框1（searchCategory） 3.选择框2（searchTCA）
除了一个我无法弄清楚的问题外，我有一切工作。
当用户在任一选择框中选择其中一个选项时，我希望另一个选项重置为默认值。
我还在学习淘汰赛，所以任何帮助都会非常感激。
谢谢 -
这是我的HTML：
<div class="row">
<div class="col-sm-12">
<form id="requestForm" class="request-form form-horizontal">
<div class="form-group">
<label for="searchInput" class="col-sm-3 control-label">Search</label>
<div class="col-sm-9">
<input id="searchInput" type="text" name="searchInput" class="form-control" placeholder="What are you looking for?" onfocus="this.value=''" data-bind="textInput: query, valueUpdate: 'keyup'" autocomplete="off" />
</div>
</div>
<div class="form-group">
<label for="searchCategory" class="col-sm-3 control-label">View by Category</label>
<div class="col-sm-9">
<select id="searchCategory" data-bind="options: availableCategories, value: selectedCategory, optionsCaption: 'Search by Category'"></select>
</div>
</div>
<div class="form-group">
<label for="searchTCA" class="col-sm-3 control-label">View by TCA Method</label>
<div class="col-sm-9">
<select id="searchTCA" data-bind="options: availableTcaMethods, value: selectedTcaMethod, optionsCaption: 'Search by TCA Method'"></select>
</div>
</div>
</form>
</div>
这是JS：
define(function (require) {
"use strict";
var $ = require("jquery"),
ko = require("knockout"),
komapping = require("komapping"),
bootstrap = require("bootstrap"),
$embedElement = $("#Architectural-Guidebook");
if ($embedElement.length) {
function ArchitecturalGuidebookViewModel(dduration) {
var self = this;
self.specifications = ko.observableArray([]);
debugger;
self.availableCategories = ko.observable();
self.selectedCategory = ko.observable();
self.availableTcaMethods = ko.observable();
self.selectedTcaMethod = ko.observable();
self.availableCategories = ko.dependentObservable(function () {
var types = ko.utils.arrayMap(self.specifications(), function (item) { return item.Category; });
return ko.utils.arrayGetDistinctValues(types).sort();
});
self.availableTcaMethods = ko.dependentObservable(function () {
var types = ko.utils.arrayMap(self.specifications(), function (item) { return item.TcaMethod; });
return ko.utils.arrayGetDistinctValues(types).sort();
});
self.specifications($.parseJSON(window.jsonModel));
self.query = ko.observable('What are you looking for?');
// Search
self.pageNumber = ko.observable(0);
self.filterSpecifications = ko.computed(function () {
self.pageNumber(0);
return ko.utils.arrayFilter(self.specifications(), function (i) {
var filterLogic =
(i.TcaMethod.toLowerCase().indexOf(self.query().toLowerCase()) >= 0) ||
(i.Title.toLowerCase().indexOf(self.query().toLowerCase()) >= 0) ||
(i.Category.toLowerCase().indexOf(self.query().toLowerCase()) >= 0) ||
(i.Application.toLowerCase().indexOf(self.query().toLowerCase()) >= 0) ||
(i.Category === self.selectedCategory() && self.query('What are you looking for?')) ||
(i.TcaMethod === self.selectedTcaMethod() && self.query('What are you looking for?'));
return filterLogic;
});
});
// Pagination
self.nbPerPage = 8;
self.totalPages = ko.computed(function () {
var div = Math.floor(self.filterSpecifications().length / self.nbPerPage);
div += self.filterSpecifications().length % self.nbPerPage > 0 ? 1 : 0;
return div - 1;
});
self.paginated = ko.computed(function () {
var first = self.pageNumber() * self.nbPerPage;
return self.filterSpecifications().slice(first, first +
self.nbPerPage);
});
self.hasPrevious = ko.computed(function () {
return self.pageNumber() !== 0;
});
self.hasNext = ko.computed(function () {
return self.pageNumber() !== self.totalPages();
});
self.next = function () {
if (self.pageNumber() < self.totalPages()) {
self.pageNumber(self.pageNumber() + 1);
}
};
self.previous = function () {
if (self.pageNumber() !== 0) {
self.pageNumber(self.pageNumber() - 1);
}
};
};
ko.applyBindings(new ArchitecturalGuidebookViewModel());
}
});
答案 0 :(得分：1)
您可以subscribe $today = date('d');
$tomorrow = date('d', strtotime('+ 1 day'));
$thedayaftertomorrow = date('d', strtotime('+ 2 day'));
$current_month = date('m');
$next_month = date('m', strtotime('+ 1 month'));
$args = array (
'posts_per_page' => 4, // number of posts
'post_type' => 'employees', // your custom post type
'meta_key' => 'birthday', // your custom date field name
'orderby' => 'meta_value_num',
'order' => 'ASC',
'meta_query' => array(
'relation' => 'OR',
array(
'key' => 'birthday',
'compare' => 'REGEXP',
'value' => '[0-9]{4}' . $current_month . $today,
),
array(
'key' => 'birthday',
'compare' => 'REGEXP',
'value' => '[0-9]{4}' . $current_month . $tomorrow,
),
array(
'key' => 'birthday',
'compare' => 'REGEXP',
'value' => '[0-9]{4}' . $current_month . $thedayaftertomorrow,
),
array(
'key' => 'birthday',
'compare' => 'REGEXP',
'value' => '[0-9]{4}' . $next_month . '[0-9]{2}',
),
)
);
和selectedCategory个可观察对象，并在其中一个更改时将其他下拉列表的值设置为selectedTcaMethod。
此外，您正在清除undefined上的输入value。这只会清除输入而不是focus可观察值。因此，即使输入已清除，query计算属性也不会被触发filterSpecifications。相反，您可以使用event绑定来调用函数onfocus。
这是一个最小的工作片段：
onfocusvar viewModel = function() {
var self = this;
self.selectedCategory = ko.observable();
self.selectedTcaMethod = ko.observable();
self.availableCategories = ko.observableArray(["Category 1"]);
self.availableTcaMethods = ko.observableArray(["TCA 1"]);
self.selectedCategory.subscribe(function() {
// if condition added to avoid cyclic subscribe triggers
if (self.selectedCategory())
self.selectedTcaMethod(undefined);
})
self.selectedTcaMethod.subscribe(function() {
// if condition added to avoid cyclic subscribe triggers
if (self.selectedTcaMethod())
self.selectedCategory(undefined);
});
self.query = ko.observable('What are you looking for?');
self.onFocus = function() {
// clear the input on focus
self.query('');
};
self.filterSpecifications = ko.computed(() => {
self.query() + self.selectedCategory() + self.selectedTcaMethod();
console.log("computed");
});
}
ko.applyBindings(new viewModel());