使用js制作html按鈕更新選擇標簽onchange函數

Question

按原樣運行代碼只會向您展示我的核心目的是什么。 只是顯示重新排列的數據。 但我正在嘗試添加 NEXT 和 PREVIOUS 按鈕以轉到選擇下拉菜單中的下一個選項，以減少鼠標的里程。 我還沒有 PREVIOUS 按鈕的任何代碼/功能，因為我試圖通過編寫 NEXT 按鈕來獲得成功。 您可以使用我在代碼中的注釋來進一步指導您。 而且我沒有使用 jQuery。

請注意，數字（商店編號）不是完全連續的。 因此，“+ 1”並不是一個好主意。

我將如何編碼按鈕來來回循環選擇標簽選項？

<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 日。感謝 user2314727，我能夠了解到“選擇”可以像數組一樣，它的“選項”充當索引項。 昨晚在谷歌的幫助下再次擺弄我的代碼，我得到了下面的解決方案。 將“.value”關鍵字添加到@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);
    }
    
}

Answer 1

也許這會有所幫助（通過單擊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>

使用js制作html按鈕更新選擇標簽onchange函數

問題描述

1 個解決方案

解決方案1
0 已采納 2016-03-30 21:58:41

使用js制作html按鈕更新選擇標簽onchange函數

問題描述

1 個解決方案

解決方案1 0 已采納 2016-03-30 21:58:41

解決方案1
0 已采納 2016-03-30 21:58:41