使用敲除功能在下拉菜单中预先选择一个值 [英] Preselect a value in a dropdown using knockout
问题描述
我有多个10个下拉菜单要显示在页面中.我正在使用淘汰赛来建立页面.基本上我有一个站点" obseravablearray的集合.在站点"数组中，我有一个用户"的集合，这是一个可观察的数组. 用户"显示为下拉列表.我需要根据下拉列表预先选择一个值.但是，它不起作用.我无法在下拉列表中看到所选的值.请让我知道任何帮助.由于下拉列表的显示是动态的，因此我不会为下拉列表硬编码任何ID值.
I have multiple 10 dropdowns to be displayed in the page. I am using knockout to build the page. Basically i have a collection of 'sites' obseravablearray. Inside 'site' array i have a collection of 'users' which is an observablearray. 'users' are displayed as dropdown. I need to preselect a value based inside the dropdowns. However it is not working. I am not able to see the selected value in the dropdown. Please let me know for any help. I would not hardcode any id value for the dropdown as the display of the dropdowns is dynamic.
Below is the sample code using knockout (aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication6.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-3.0.0.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/knockout-3.4.0.js"></script>
<script src="primarySetup.js"></script>
</head>
<body>
<form id="frmPrimarySiteUser">
<div class="container">
<div class="row">
<span>Setup </span>
</div>
<div class="row">
<table class="table-bordered table-condensed table-hover table-responsive" id="tblEncode">
<thead>
<tr>
<th>Site Name</th>
<th>User Id</th>
</tr>
</thead>
<tbody data-bind="foreach: PrimarySiteUsers">
<tr>
<td><span data-bind="text: SiteName"></span></td>
<td><select name="ddlUsers" data-bind="options: UserParam, selected: 'SelectedUserId', optionsText: 'UserName', optionsValue: 'UserId', optionsCaption:'-Select-'"></select></td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</body>
</html>
js file.
function PrimaryUserViewModel() {
var self = this;
self.PrimarySiteUsers = ko.observableArray([]);
self.Users1 = ko.observableArray([]);
self.Users2 = ko.observableArray([]);
function addPrimarySiteUser(siteId, siteName, userParam) {
return {
SiteId: ko.observable(siteId),
SiteName: ko.observable(siteName),
UserParam: ko.observable(userParam)
}
}
function addUserDropDown(userId, userName, selectedValue) {
return {
UserId: ko.observable(userId),
UserName: ko.observable(userName),
SelectedUserId: ko.observable(selectedValue)
}
}
self.Users1().push(new addUserDropDown(1, 'jj', false));
self.Users1().push(new addUserDropDown(2, 'jk', true));
self.PrimarySiteUsers.push(new addPrimarySiteUser(1, 'site1', self.Users1()))
self.Users2().push(new addUserDropDown(1, 'mj', true));
self.Users2().push(new addUserDropDown(2, 'mk', false));
self.PrimarySiteUsers.push(new addPrimarySiteUser(1, 'site1', self.Users2()))
}
$(document).ready(function () {
var primaryUserModel = new PrimaryUserViewModel();
ko.applyBindings(primaryUserModel);
})
推荐答案
您的示例中有很多奇怪的代码，因此我将从基础知识入手:
There's a lot of weird code in your example, so I'll start with the basics:
您可以通过以下方式在视图模型中设置选择:
You can set selections in your viewmodel by:
-
创建一个要呈现为
options的列表，并创建一个observable来存储当前选择
Create a list you want to render as
options, and anobservableto store the current selection
var vm = {
choices: [ 1, 2, 3],
selection: ko.observable(2)
};
在<select>框中将列表绑定到options，将可观察的内容绑定到value:
Bind the list to options and the observable to value in your <select> box:
<select data-bind="options: choices, value: selection"></select>
将一个值写入selection，该值也在绑定到options的数组中:
Write a value to selection that is also in the array bound to options:
vm.selection(3); // Selects the last element of the dropdown
vm.selection(vm.choices[1]) // Select 2
要使其在您的代码中起作用:
To get this to work in your code:
- 添加
value绑定和selection可观察 - 存储对
primvm的引用，以便我们可以更新selected属性 - 抬起用户及其
UserId来设置新选择
- Add a
valuebinding andselectionobservable - Store a reference to the
primvm so we can update theselectedproperty - Loop up a user and their
UserIdto set a new selection
function PrimaryUserViewModel() {
var self = this;
self.PrimarySiteUsers = ko.observableArray([]);
self.Users1 = ko.observableArray([]);
self.Users2 = ko.observableArray([]);
function addPrimarySiteUser(siteId, siteName, userParam) {
return {
SiteId: ko.observable(siteId),
SiteName: ko.observable(siteName),
UserParam: ko.observable(userParam),
selection: ko.observable(null)
}
}
function addUserDropDown(userId, userName, selectedValue) {
return {
UserId: ko.observable(userId),
UserName: ko.observable(userName),
SelectedUserId: ko.observable(selectedValue)
}
}
self.Users1().push(new addUserDropDown(1, 'jj', false));
self.Users1().push(new addUserDropDown(2, 'jk', true));
var primUser1 = new addPrimarySiteUser(1, 'site1', self.Users1());
self.PrimarySiteUsers.push(primUser1)
// Select jk:
// 1: find reference to user
var jkUser = self.Users1()[1];
// 2: get id (because of `optionsValue: 'UserId'`)
var jkId = jkUser.UserId();
// 3: write to selection
primUser1.selection(jkId);
self.Users2().push(new addUserDropDown(1, 'mj', true));
self.Users2().push(new addUserDropDown(2, 'mk', false));
self.PrimarySiteUsers.push(new addPrimarySiteUser(1, 'site1', self.Users2()))
}
var primaryUserModel = new PrimaryUserViewModel();
ko.applyBindings(primaryUserModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<form id="frmPrimarySiteUser">
<div class="container">
<div class="row">
<span>Setup </span>
</div>
<div class="row">
<table class="table-bordered table-condensed table-hover table-responsive" id="tblEncode">
<thead>
<tr>
<th>Site Name</th>
<th>User Id</th>
</tr>
</thead>
<tbody data-bind="foreach: PrimarySiteUsers">
<tr>
<td><span data-bind="text: SiteName"></span></td>
<td><select name="ddlUsers" data-bind="options: UserParam, value: selection, optionsText: 'UserName', optionsValue: 'UserId', optionsCaption:'-Select-'"></select></td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
您的代码中发生了许多奇怪的事情，您还应该解决:
There are many weird things happening in your code that you should also fix:
- 不需要时不使用
new - 将不执行任何操作的数据绑定删除为
selected - 重组一些数据定义和视图模型
- 属性的首字母使用小写字母，构造函数使用大写字母...
- Don't use
newwhen it's not needed - Remove data-binds as
selectedthat don't do anything - Restructure some of the data definitions and viewmodels
- Use lowercase characters for properties' first letters and uppercase ones for constructors...
这篇关于使用敲除功能在下拉菜单中预先选择一个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
