使用js使html按钮更新选择标记onchange函数
use js to make html button update select tag onchange function
按原样运行代码只会向您展示我的核心目的。只需显示重新排列的数据。但我正在尝试添加NEXT和PREVIOUS按钮,以转到选择下拉菜单中的下一个选项,从而减少鼠标上的里程。我还没有任何PREVIOUS按钮的代码/功能,因为我正试图通过对NEXT按钮进行编码来获得成功。您可以使用我在代码中的注释来进一步指导您。我没有使用jQuery。
请注意,这些数字(商店编号)并不是完全按顺序排列的。因此"+"1〃;不是一个好主意。
我该如何对按钮进行编码,以便在Select标记选项中来回循环?
<body>
<p id="display1"><p/> <!--Used for debugging-->
<button type="button" onclick="previousButton()">Previous Store</button><!--Unused for now-->
<button type="button" onclick="nextButton()">Next Store</button>
<p>STORE NUMBER: <select id="mySelect" onchange="storeRequest()">
<option value="00">00
<option value="01">01
<option value="02">02
<option value="03">03
<option value="04">04
<option value="05">05
<option value="06">06
<option value="08">08
<option value="56">56
</select>
</p>
<ol id="showpages"></ol>
</body>
<script type="text/javascript">
//function below is object constructor for Page objects.
function page(name, storeNumS) {
this.name = name;
this.storeNumS = storeNumS;
this.storesArray = storeNumS.split(" ")
}
// Below are some test instances of the page objects
// JS-program's goal is to rearrange the data, then display it
var _001_01 = new page("_001_01", "01 03 05 56 06 08");
var _001_02 = new page("_001_02", "01 02 03 04 05 08");
var _002_01 = new page("_002_01", "02 03 04 56 06 08");
var _002_02 = new page("_002_02", "02 03 04 56 06 08");
// All the above pages in an array
var allPagesArray = [_001_01, _001_02, _002_01, _002_02];
// This function gets the <select> option, then runs the search function
var storeRequest = function() {
var request = document.getElementById("mySelect").value;
searchObjAry(request);
}
// Below is the function I'd like help in.
// Havent created a funciton for "Previous Button" since am
// trying to figure out "Next" Button currently.
// Hence "previousButton()" doesn't exist yet
var nextButton = function(nextRqst) {
var request = document.getElementById("mySelect").value;
var nextRqst = request + 1; // or rather goto next option on select tag list
searchObjAry(nextRqst);
// Used the line below to test the function
// document.getElementById("display1").innerHTML = nextRqst;
}
// The function below will search for requested store in every page,
// then create a list and update the DOM
var searchObjAry = function (storeNum){
var orderedPgList = "";
var pageList = [];
for (i = 0; i < allPagesArray.length; i++){
for (j = 0; j < allPagesArray[i].storesArray.length; j++){
if ( allPagesArray[i].storesArray[j] === storeNum){
pageList.push(allPagesArray[i].name);
}
}
}
for (k = 0; k < pageList.length; k++) {
orderedPgList += "<li>" + pageList[k] + "</li>";
}
document.getElementById("showpages").innerHTML = orderedPgList;
return; // <-- still have no idea what "return" really does. Not sure if it'll mess anything up later.
}
</script>
更新:2016年4月5日。感谢用户2314727,我能够了解到";选择";可以像数组一样工作;选项";充当索引项。昨晚,在谷歌的帮助下,我再次摆弄了我的代码,我得到了下面的解决方案。添加";。值";关键字到@user…'的贡献,我能够在searchObjAry()函数中处理选项的值
唯一需要解决的问题是使PreviousButton循环回到列表的底部,并以与NextButton前进相同的方式重复后退。
var nextButton = function() {
var request = document.getElementById("mySelect");
var nxtIndx = request.options[request.selectedIndex += 1].value;
searchObjAry(nxtIndx);
}
var previousButton = function() {
var request = document.getElementById("mySelect");
var prevIndx = request.options[request.selectedIndex -= 1].value;
if (prevIndx !== request[0]){
searchObjAry(prevIndx);
}else if (prevIndx === request[0]){
prevIndx = request.options[request.selectedIndex = 8].value;
searchObjAry(prevIndx);
}
}
也许这会有所帮助(点击nextButton
在下拉列表中选择下一个标签):
var request = document.getElementById("mySelect");
request.selectedIndex += 1; // goto next option on select tag list
//function below is object constructor for Page objects.
function page(name, storeNumS) {
this.name = name;
this.storeNumS = storeNumS;
this.storesArray = storeNumS.split(" ")
}
// Below are some test instances of the page objects
// JS-program's goal is to rearrange the data, then display it
var _001_01 = new page("_001_01", "01 03 05 56 06 08");
var _001_02 = new page("_001_02", "01 02 03 04 05 08");
var _002_01 = new page("_002_01", "02 03 04 56 06 08");
var _002_02 = new page("_002_02", "02 03 04 56 06 08");
// All the above pages in an array
var allPagesArray = [_001_01, _001_02, _002_01, _002_02];
// This function gets the <select> option, then runs the search function
var storeRequest = function() {
var request = document.getElementById("mySelect").value;
searchObjAry(request);
}
// Below is the function I'd like help in.
// Havent created a funciton for "Previous Button" since am
// trying to figure out "Next" Button currently.
// Hence "previousButton()" doesn't exist yet
var nextButton = function(nextRqst) {
var request = document.getElementById("mySelect");
request.selectedIndex += 1; // goto next option on select tag list
searchObjAry(nextRqst);
// Used the line below to test the function
// document.getElementById("display1").innerHTML = nextRqst;
}
// The function below will search for requested store in every page,
// then create a list and update the DOM
var searchObjAry = function(storeNum) {
var orderedPgList = "";
var pageList = [];
for (i = 0; i < allPagesArray.length; i++) {
for (j = 0; j < allPagesArray[i].storesArray.length; j++) {
if (allPagesArray[i].storesArray[j] === storeNum) {
pageList.push(allPagesArray[i].name);
}
}
}
for (k = 0; k < pageList.length; k++) {
orderedPgList += "<li>" + pageList[k] + "</li>";
}
document.getElementById("showpages").innerHTML = orderedPgList;
return; // <-- still have no idea what "return" really does. Not sure if it'll mess anything up later.
}
<p id="display1">
<p/>
<!--Used for debugging-->
<button type="button" onclick="previousButton()">Previous Store</button>
<!--Unused for now-->
<button type="button" onclick="nextButton()">Next Store</button>
<p>STORE NUMBER:
<select id="mySelect" onchange="storeRequest()">
<option value="00">00
<option value="01">01
<option value="02">02
<option value="03">03
<option value="04">04
<option value="05">05
<option value="06">06
<option value="08">08
<option value="56">56
</select>
</p>
<ol id="showpages"></ol>
相关文章:
- 试图将onChange函数作为道具传递给GrandChlidren,结果是TypeError:这是未定义的
- onChange 函数更改表中显示的数据
- 从javascript调用服务器端的下拉列表onchange函数
- 从Document调用onchange函数.已准备好从更新中预先选择的项目
- 根据其他onchange函数来选择在onchange中运行哪个函数
- 对于新建的元素,onchange函数只调用一次
- jquery中的下拉onchange函数
- Internet Explorer没有't执行onChange函数
- 使用js使html按钮更新选择标记onchange函数
- java脚本中用于多个控件的单个onchange函数
- 如何将 ng-repeat 变量的值传递到 input[“file”] 的 onchange 函数中
- onchange 函数需要时间来刷新页面
- 如何指定在另一个函数中定义的 onchange 函数
- 如何在 Rails 中将值从 collection_select 传递给 onchange 函数
- $.click() 和 $.trigger() 不会激活复选框的 onchange 函数
- Javascript:执行 onchange 函数时选择的值是什么
- 如何在动态生成的选择标签中实现onchange函数
- 为什么不是'我的onchange函数不起作用
- 需要选择一个新列,并使用带有下拉菜单的onchange函数打印到文本区域
- Onchange函数使用laravel5不起作用