gpt4 book ai didi

javascript - 如何对存储在组合框中的数据库结果进行排序

转载 作者:行者123 更新时间:2023-11-29 10:25:18 25 4
gpt4 key购买 nike

演示:单击下面的链接并选择“初学者”。您会注意到组合框中加载的以下测验未排序。这就是问题所在:

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#sortString#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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com