js verwenden, um html button update zu machen wählen tag onchange funktion

Ich lerne Programmierung und JS von Grund auf neu. Nachdem du so weit gekommen bist, fühlst du dich irgendwie peinlich, dass ich diesen nächsten Teil nicht herausfinden kann. Wenn Sie den Code so ausführen, wie er ist, zeigt er Ihnen einfach, was mein Hauptzweck ist. Nur umgelagerte Daten anzeigen. Aber ich versuche, die Schaltflächen NEXT und PREVIOUS hinzuzufügen, um zur nächsten Option im Drop-down-Menü zu gelangen, um die Kilometer mit der Maus zu verringern. Ich habe noch keinen Code/Funktion für die PREVIOUS-Taste, da ich versuche, Erfolg mit der Codierung der NEXT-Taste zu finden. Sie können meine Kommentare im Code verwenden, um Sie weiter zu führen. Und ich benutze keine jquery. Beachten Sie, dass die Nummern (Geschäftsnummern) nicht perfekt sequenziell sind. Daher ist die "+ 1" nicht wirklich eine gute Idee. Wie würde ich Code Die Tasten, um durch die Auswahl Tag Optionen hin und her zu wechseln? Dankjs verwenden, um html button update zu machen wählen tag onchange funktion

<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>

UPDATE: 5. April 2016. Dank user2314727, ich war in der Lage zu lernen, dass die „select“ wie ein Array handeln und „Optionen“ Akt ist es, als die indizierten Elemente. Ich habe letzte Nacht mit Hilfe von Google wieder mit meinem Code herumgetüftelt und kam mit der folgenden Lösung. Durch Hinzufügen des ".value" -Schlüsselworts zu @user ... 's Beitrag konnte ich den Wert der Option in der Funktion searchObjAry() bearbeiten.
Nur das Problem, das behoben werden muss, besteht darin, den PreviousButton-Zyklus wieder an den unteren Rand der Liste zu setzen und wiederholt rückwärts zu gehen, so wie der NextButton vorwärts arbeitet.

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); 
    } 

}

Quelle

2016-03-30 theUnlearned

Vielleicht wird dies (wählen Sie den nächsten Tag in der Dropdown-Liste auf der nextButton durch einen Klick) helfen:

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>

Quelle

2016-03-30 21:58:41 user2314737

Dank. Progressiv, obwohl halb abgeschlossen. Ihr Code für die Schaltflächenfunktion funktioniert, ermöglicht das Durchlaufen der Optionen Liste. Seltsam seit Schaltfläche Func ruft SearchObjAry Func mit dem neuen Argument, funktioniert nicht: var nextButton = function() { var request = document.getElementById ("mySelect"); searchObjAry (request.selectedIndex + = 1); } – theUnlearned

Ich war mit Ihrem Beitrag und hatte mehr Zeit zu google letzte Nacht und erfuhr, dass Sie

js verwenden, um html button update zu machen wählen tag onchange funktion

Antwort