根据用户 ID 限制下拉选项
Limiting dropdown options based on userID
我问这个问题是因为我不确定解决问题的最佳方法。
问题:我有一个预填充的下拉列表,其中包含 1,000 个左右的数字。我需要根据使用下拉列表的用户来限制下拉列表中显示的数字。
我想到的解决方案:
- 使用 jQuery 隐藏所有数字
- 使用 jQuery/AJAX 调用数据库,传递用户 ID
- DB 返回基于用户 ID 的值列表
- 在下拉列表中显示与从数据库返回的数字具有相同值的选项
假设这是我的 HTML:
<select>
<option>Please Select..</option>
<option value="101"> CC 101 </option>
<option value="102"> CC 102 </option>
<option value="103"> CC 103 </option>
<option value="104"> CC 104 </option>
<option value="105"> CC 105 </option>
<option value="106"> CC 106 </option>
</select>
这是我的数据库表:
=======================
| User1 | 101 |
| User2 | 101 |
| User2 | 102 |
| User2 | 103 |
| User3 | 103 |
=======================
例如,我需要弄清楚如何传递 user2 然后返回 101,102,103。
我只知道基本的js/jQuery,而且我对DB不是很有经验,所以欢迎任何可以帮助我实现最终目标的建议。
编辑/注意:听起来很愚蠢....安全性在这里不是什么大问题。这将用于公司内部网站,如果用户觉得有必要四处走动并选择不同的号码,那真的没有那么重要。我也不认为公司的任何员工有愿望/需要/想要选择与他们允许的不同选项。
此外,列表必须预先填充,然后隐藏数字。这是我使用的平台的设置方式,所以我必须使用显示/隐藏或类似的东西。
我只会按照你方法的第2-3步;但是,我不会以你显示的方式存储数字。更好的方法是将它们存储在名为 user_value 的表中 - 或类似的东西 - :
user_id | value
---------+-------
user1 | 101
user1 | 102
user2 | 101
仅仅因为您将来可以轻松添加/删除/更新值,而不必解析逗号分隔的值。
我会避免使用jQuery来简单地"隐藏"东西,因为Javascript可以被用户禁用,他最终可能会提交他想要的任何值(可见或不可见( - 永远不要相信用户输入。
总之,这样做:
- 使用 jQuery/AJAX 调用数据库,传递用户 ID
- DB 返回基于用户 ID 的值列表
- 使用从数据库返回的值填充下拉列表。 在
- 服务器端验证表单,以确保提交的值存在于
user_value
表中。
如果这是示例数据库表和 Select 元素的示例。然后我认为最好的方法是不要自己写任何东西,只是让数据库选择要共享的内容和共享的位置。
在这里,我们进行编码。我将尝试解释我在写什么以及我是如何写的;因为你是新手:-(
适合您的 HTML 代码
您的工作的HTML代码将如此简单
<select name="someName">
<!-- No options please! -->
</select>
获取用户标识
现在,一旦用户登录。尝试通过以下任一方法获取用户 ID。
jQuery
要使用jQuery,您需要使用服务器的生成值,因为jQuery不能干扰服务器请求和代码。因此,您可以创建一个简单的隐藏输入,并为其提供当前登录用户的值。这是示例
<input type="hidden" id="userId" value="@WebSecurity.CurrentUserId" />
现在,使用 jQuery,您可以获取此输入的值。这将是代码
var userId = $('#userId').val();
ASP.NET
要使用 ASP.NET,你什么都不做。您要做的就是将 ASP.NET 的内置方法用作
WebSecurity.CurrentUserId;
它会给你一个整数值。这将是当前登录用户的用户 ID。
WebSecurity
的使用
如以下链接所述,网络安全是一类数据。它可以在您的应用程序中使用,以减少代码并帮助您以更好的速率获取用户的属性。
此类用作变量的值或参数。此方法将返回特定用户的属性。例如,您可以获取用户的 UserId、他的用户名、他的 CreateDate,或者您可以使用 WebSecurity
登录用户或注销用户。
下面是使用网络安全的示例。就像你在jQuery中创建变量并获取其值的方式一样。使用此方法并获取值。
j查询方法
var userId = $('someElement').val();
/* get the value of some element as userId */
WebSecurity.CurrentUserId 方法
var userId = WebSecurity.CurrentUserId;
然后,您可以在数据库查询中使用它,
db.Query("SELECT * FROM UserProfile WHERE UserId =@0", userId);
或者,将其写在文档中
Response.Write(userId);
或者做你想做的事。您可以在MSDN的链接中学习类的语法和其他内容。:-)
http://msdn.microsoft.com/en-us/library/webmatrix.webdata.websecurity(v=vs.111(.aspx
发送 Ajax 请求
现在发送 Ajax 请求。如果你知道,那就太好了!如果没有,那么这里是要发送的 Ajax 请求的示例
$.ajax({
url: 'page_url',
data: 'userId=' + userId, // userId that you got from input
success: function (data) { // note the data parameter
/* write in the select statement */
$('select').html(data); // usage of data parameter
}
});
一旦完成。它将更新选择元素的选项。但是等等,它会增加什么?
是你,谁也控制它。将服务器端代码编辑为以下内容。
从数据库获取数据。
如果您是数据库和 ASP.NET 的新手,则需要先学习一些知识。
http://www.asp.net/web-pages/tutorials/data/5-working-with-data
好的,你也可以稍后再学。我仍然会向你解释我的所有代码。:-)
因此,对于数据库,您首先需要创建与数据库的连接,然后可以搜索其表和其他内容。这是代码
var db = Database.Open("databaseName"); // Open a connection
var userId = Request.QueryString["userId"]; // get userid from ?userId=int
var selectQuery = "SELECT * FROM table_name WHERE UserId =@0"; // Query
var results = db.Query(selectQuery, userId); // Get data in a variable
获取所有这些值后,您需要做的就是创建一个响应,以发送到客户端。
我希望,您正在使用网页技术。好!你在这里比其他人安全一步。
只需按向下翻页并向下移动到最后几行并创建一个新的 Div 元素
<div>
<!--empty div element -->
</div>
现在,在其中编写一个 if else 语句并创建一个将添加到 select 元素中的响应。
P.S 给出响应的另一种方法(实际方法(是使用 Actuall HttpResponse 类,然后给它值。喜欢这个
Response.Write("Hello World!");
如果你写上面的行,它会把这个字符串添加到你的选择语句中(虽然是非法的(,但这将使你理解它的用法。
http://msdn.microsoft.com/en-us/library/system.web.httpresponse.aspx
我仍然对您的约束感到有些困惑,但根据您的评论:
该列表将在客户端预填充(从我无法访问/修改的服务器(然后对不同的数据库(简单,两列(进行 AJAX 调用,然后将值返回到原始 AJAX 调用,其中 THEN JS 隐藏未返回的值(或显示返回的值,如果它们最初是隐藏的。
为什么不创建一个"统一"服务(在服务器上(,以便只进行一次 AJAX 调用(从客户端(?
http://MySite/MyService.aspx/GetOptionsForUser(101)
此服务将使对两个数据库的调用返回给定用户 ID 的允许选项列表。这让服务器可以完成大部分繁重的工作,并大大减少客户端上的jQuery数量。
更多信息:
URL 是 jQuery 用来进行 AJAX 调用的。
最简单的做法是:
- 创建一个名为
http://mySite/MyService.aspx
的网页 - 添加一个名为 GetOptionsForUser(( 的公共方法,该方法接受整数并返回数字列表。这是查询两个数据库的"统一"逻辑。通过添加 WebMethod 属性使方法 AJAX 可调用。
- 在要填充下拉列表的现有网页中,对
http://MySite/MyService.aspx/GetOptionsForUser
进行 AJAX 调用,并将用户 ID 作为 AJAX 参数传递。
我认为一个好方法是对所有用户使用 JSON。为具有选项的用户准备一个 JSON 数组,并根据用户呈现它以填充选项。例如。
var user1 = '["101","102","103"]';
这是一个示例,显示了 jquery ajax 和 php 如何收集:
例如,当一个按钮单击Ajax时,向服务器端语言(PHP(发送订单,PHP处理该订单并显示合适的响应:
$("#button").click(function(){
$.ajax({
type:"POST",
url:"ajax/alertMe.php",
data:({alert:"yes"}),
// The alert ^^ is the name of $_POST variable in php
success:function(data){
//this data can be some javascript and HTML codes or a text and ...
evel(data);
}
});
})
这是名为 alertMe.php 的 php 代码:
<?php
if(isset($_POST['alert']) && $_POST['alert']!=""){
if($_POST['alert']=="yes"){
echo 'alert("the condition says I should alert!");';
}else{
echo '$(this).fadeOut();';
}
}
?>
既然你这么说 - 你有预先填充的条目,我会采用这种方法 -
-
首先在页面加载时将所有项目保存在JS数组中-
var alloptions = $("select").find("option").get();
-
然后,对于获取项目列表后的每个用户 ID,显示和隐藏它们,如下所示 -
//getting the id of the user and passing to AJAX call $.ajax({ url: '', dataType: 'json', type: 'GET', success:function(data){ // other codes var userItemList = []; //list of items for this user [102,103, etc] $("select").empty(); $("select").append(alloptions[0]) //the first one since it is the null one for(var i = 0; i < userItemList.length; i++){ for(var j = 0; j < alloptions.length; j++){ if (parseInt($(alloptions[j]).val()) == userItemList[i]){ $("select").append(alloptions[j]); } } } } });
如果您只需要在第一页加载时填充一次,这是我的最佳选择
例:
HTML:
<select id="auto-populated">
<?php
//Next three lines you need if you dont have the user_id stored before in your code
require('db.php');
session_start();
$user_id = $_SESSION['user_id'];
//Selecting only the needed options to put here
$sql = "SELECT dropdown_value, dropdown_option FROM tbl_dropdown WHERE dropdown_number='your-filter-kriteria-here'";
$result = mysql_query($sql, $db) or die(mysql_error().': '.$sql);
//After you got the filtered results from database, print them in the <select>
echo "<option value=' '>Please select one...</option>";
while ($item = mysql_fetch_assoc($result)) {
echo "<option value='".$item['dropdown_value']."'>".$item['dropdown_option']."</option>";
}
?>
</select>
编辑:我看到你需要 asp.net 所以尝试转换这个
简单的问题。我会尝试用你自己想到的方式回答。
0. 您现有的 HTML 代码
Choose your Value:
<select id="dropDown">
<option>Please Select..</option>
<option value="101"> CC 101 </option>
<option value="102"> CC 102 </option>
<option value="103"> CC 103 </option>
<option value="104"> CC 104 </option>
<option value="105"> CC 105 </option>
<option value="106"> CC 106 </option>
</select>
1. 使用 jQuery 隐藏所有数字
<script>
$("#dropDown").html("<option>Please Select..</option>");
</script>
2. 使用 jQuery/AJAX 调用数据库,传递 userID 和3.DB 返回基于用户 ID 的值列表
<script>
$(function()
{
var userId = 1; <!-- Read & store the userId here -->
$.ajax({
type: 'POST',
url: 'server.php', <!--server.pl, server.js, server.asp, server.py whatever-->
dataType: "json",
data: {'userId': userId},
success: function (returnData) //Returns "[101, 102, 103]"
{
4. 在下拉列表中显示与从数据库返回的数字具有相同值的选项
for (var i=0; i<returnData.length; i++)
{
$("#dropDown").append("<option value='"+returnData[i]+"'> CC "+returnData[i]+" </option>");
}
}
});
});
</script>
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- 我们如何在互联网断开连接或用户关闭选项卡/浏览器时调用注销servlet
- 如何检测用户是否在同一会话中打开了多个窗口或选项卡
- PayPal按钮是否有一个简单的选项,其中金额基于一些用户输入
- 在用户关闭/更改移动浏览器选项卡之前进行检测
- 计算用户从多个文件中选择的选项数量
- 询问用户何时尝试关闭浏览器选项卡
- 在Chrome for iOS中,附加到用户代理字符串的唯一选项卡ID
- 管理socket.io中的多个选项卡(但为同一用户)
- 如何防止用户使用浏览器选项禁用脚本
- 当用户在选择框中选择选项时,使用window.location.href重定向用户只会更改导航器中URL的最后一位
- 当用户关闭浏览器选项卡时,如何使用 PHP 或 javascript 从我的站点注销用户
- 用户界面先前选择的选项选择更改
- 读取一个本地文件,编码为base64,我想给用户一个将结果保存到文件的选项
- 当用户单击时,在新选项卡中打开链接
- 多选项卡LocalStorage单用户用例
- Chrome:在用户打开一个选择后添加选项
- 在我的html页面-web应用程序用户界面的一个选项卡中的另一个html页面中的选项卡
- 获取用户选择的选项的值
- 如何更改用户选项更改时中的Onchange事件中Visual Composer上的按钮(选择选项)