- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
演示:单击下面的链接并选择“初学者”。您会注意到组合框中加载的以下测验未排序。这就是问题所在:
http://www.teachyourselfpython.com/testandtrack/
我有以下组合框,它正在从数据库中读取测验列表。我希望对组合框中的结果进行排序(例如按字母顺序)。
布局/功能是用户首先选择一个级别(初级、中级或高级)。然后,它会在其下方生成另一个组合框,用户可以从中选择测验。这些测验需要按排序顺序排列,但目前它们按创建顺序显示。
我查过这个问题,但似乎找不到答案。
我的代码是:
<body style="font-family: Arial;">
<?php include("nav.php"); ?>
<div id="head" align="center">
<img src="img/typbanner.png" alt="www.teachyourselfpython.com" width=600 height=180 />
</div>
<div id="main_body" align="center">
<h2>Time to try a <big><b>TEST!</b></big></h2>
<form id="myForm" name="onlyForm" action="quiz.php" class="home" method="POST">
<select name="quiz_level" id="quiz_form" class="form-control">
<option disabled selected="true">-- Select The level of your Test --</option>
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
</select>
<select class="form-control" name="quiz" id="got_quiz" style="display:none;"> <!--onchange="showUser(this.value)"-->
javascript部分如下:
<script>
"use strict";
$("#quiz_form").change(function () {
/* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */
var allbooks = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
var dataString = "level=" + allbooks; /* STORE THAT TO A DATA STRING */
$.ajax({ /* THEN THE AJAX CALL */
type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
url: "get-quiz-by-level.php", /* PAGE WHERE WE WILL PASS THE DATA */
dataType: "json",
data: dataString, /* THE DATA WE WILL BE PASSING */
success: function success(result) {
/* GET THE TO BE RETURNED DATA */
var option = "";
result.forEach(function (quiz, i) {
option += "<option value=\"" + quiz.id + "\">" + quiz.quiz_name + "</option>";
if (i == 0 && quiz.password_quiz != 0) {
$("#password").show();
} else if (i == 0 && quiz.password_quiz == 0) {
$("#password").hide();
}
});
$("#got_quiz").show().html(option);
}
});
});
$("#got_quiz").change(function () {
/* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */
var allbooks = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
var dataString = "quiz=" + allbooks; /* STORE THAT TO A DATA STRING */
$.ajax({ /* THEN THE AJAX CALL */
type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
url: "check_quiz_pass.php", /* PAGE WHERE WE WILL PASS THE DATA */
data: dataString, /* THE DATA WE WILL BE PASSING */
success: function success(result) {
/* GET THE TO BE RETURNED DATA */
if (result == 0) {
$("#password").hide();
} else {
$("#password").show();
}
}
});
});
有人可以建议我需要添加什么,更重要的是在哪里才能实现组合框中的排序效果?
我在 SO 上找到了这个(下面的代码),但无法看到如何应用它,因为它的情况略有不同,仅在选择级别后加载测验。
<option value="3">three</option>
<option value="1">one</option>
<option value="0">zero</option>
<option value="2">two</option>
</select>
<script>
// WARN: won't handle OPTGROUPs!
var sel = document.getElementById('foo');
// convert OPTIONs NodeList to an Array
// - keep in mind that we're using the original OPTION objects
var ary = (function(nl) {
var a = [];
for (var i = 0, len = nl.length; i < len; i++)
a.push(nl.item(i));
return a;
})(sel.options);
// sort OPTIONs Array
ary.sort(function(a,b){
// sort by "value"? (numeric comparison)
// NOTE: please remember what ".value" means for OPTION objects
return a.value - b.value;
// or by "label"? (lexicographic comparison) - case sensitive
//return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;
// or by "label"? (lexicographic comparison) - case insensitive
//var aText = a.text.toLowerCase();
//var bText = b.text.toLowerCase();
//return aText < bText ? -1 : aText > bText ? 1 : 0;
});
// remove all OPTIONs from SELECT (don't worry, the original
// OPTION objects are still referenced in "ary") ;-)
for (var i = 0, len = ary.length; i < len; i++)
sel.remove(ary[i].index);
// (re)add re-ordered OPTIONs to SELECT
for (var i = 0, len = ary.length; i < len; i++)
sel.add(ary[i], null);
</script>
最佳答案
使用Array#sort
和 String#localeCompare
像这样按 quiz_name
属性排序
result.sort(function (a, b) {
return a.quiz_name.localeCompare(b.quiz_name);
});
像这样插入
$.ajax({ /* THEN THE AJAX CALL */
type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
url: "get-quiz-by-level.php", /* PAGE WHERE WE WILL PASS THE DATA */
dataType: "json",
data: dataString, /* THE DATA WE WILL BE PASSING */
success: function success(result) {
/* GET THE TO BE RETURNED DATA */
var option = "";
result
.sort(function (a, b) {
return a.quiz_name.localeCompare(b.quiz_name);
})
.forEach(function (quiz, i) {
option += "<option value=\"" + quiz.id + "\">" + quiz.quiz_name + "</option>";
if (i == 0 && quiz.password_quiz != 0) {
$("#password").show();
} else if (i == 0 && quiz.password_quiz == 0) {
$("#password").hide();
}
});
$("#got_quiz").show().html(option);
}
});
不要尝试使用自己的字符串比较函数,因为您需要考虑大小写(大写/小写)、符号和其他有趣的东西。
关于javascript - 如何对存储在组合框中的数据库结果进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48428666/
我有一个 mysql 表,其中包含一些随机数字组合。为简单起见,以下表为例: index|n1|n2|n3 1 1 2 3 2 4 10 32 3 3 10 4 4
我有以下代码: SELECT sdd.sd_doc_classification, sdd.sd_title, sdd.sd_desc, sdr.sd_upl
如果我有两个要合并的数据框 Date RollingSTD 01/06/2012 0.16 01/07/2012 0.18 01/08/2012 0.17 01/09/20
我知道可以使用 lein ring war 创建一个 war 文件,但它似乎仍然包含码头依赖项。当我构建 war (并在 tomcat 上部署)时,有没有办法排除码头依赖项? 如果我根本不能做这件事,
维基百科关于封装的文章指出: “封装还通过防止用户将组件的内部数据设置为无效或不一致的状态来保护组件的完整性” 我在一个论坛上开始讨论封装,在那里我问你是否应该始终在 setter 和/或 gette
对于我使用的组合框内的复选框: AOEDComboAssociationName = new Ext.form.ComboBox({ id: 'AOEDComboAssociationName',
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: How do I combine LINQ expressions into one? public boo
如何在 rust 中找到排列或组合的数量? 例如C(10,6) = 210 我在标准库中找不到这个函数,也找不到那里的阶乘运算符(这就足够了)。 最佳答案 以@vallentin 的回答为基础,可以进
我有一个复杂的泛型类型用例,已在下面进行了简化 trait A class AB extends A{ val v = 10 } trait X[T<:A]{ def request: T }
如何使用 Hibernate 限制来实现此目的? (((A='X') and (B in('X',Y))) or ((A='Y') and (B='Z'))) 最佳答案 思考有效 Criteria c
我一定会在我的一个项目中使用谷歌图表。我需要的是,显示一个条形图,并且在条形图中,与每个条形相交的线代表另一个值。如果您查看下面的 jsfiddle,您会发现折线图仅与中间的条形图相交,并继续向其他条
只是一个简单的问题,我也很想得到答案,因为我不能百分百理解 Javascript 示例:假设您提示用户输入名称。够简单吧?但是你有一个数组,上面写着一些名字(其中之一就是),基本上就是我到目前为止所说
我试图通过 Haskell 理解函数式编程,但在处理函数组合时遇到了很多麻烦。 其实我有这两个功能: add:: Integer -> Integer -> Integer add x y = x
我正在寻找一种在 Realm 查询中组合 AND 和 OR 的方法。 这是我的课: class Event extends RealmObject { String id; String
例如,我有一个包含 5 个元素的哈希: my_hash = {a: 'qwe', b: 'zcx', c: 'dss', d: 'ccc', e: 'www' } 我的目标是每次循环哈希时都返回,但没
我是Combine 的新手,我想得到一个看似简单的东西。假设我有一个整数集合,例如: let myCollection = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 我想以例如 0
关于“优先组合而不是继承”的问题,我的老师是这样说的: 组合:现有类成为新类的组件 转发:新类中的每个实例方法,在现有类的包含实例上调用相应的方法并返回结果 包装器:新类封装了现有的 这三个概念我不是
我正在尝试将单个整数从 ASCII 值转换为 0 和 1。相关代码如下所示: int num1 = bin.charAt(0); int num2 = bin.charAt(1);
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 7 年前。 我经常看到“嵌套”类中的非静态变
我尝试合并两个数据集(DataFrame),如下所示: D1 = pd.DataFrame({'Village':['Ampil','Ampil','Ampil','Bachey','Bachey',
我是一名优秀的程序员,十分优秀!