Skip to content
Advertisement

use js to make html button update select tag onchange function

Running the code as is will simply show you what my core purpose is. Just displaying rearranged data. But I’m trying to add NEXT and PREVIOUS buttons to go to the next option in the select drop menu in order to lessen the miles on the mouse. I don’t have any code/function for the PREVIOUS button yet since I’m trying to find success with coding the NEXT button. You can use my comments in the code to guide you further. And I’m not using jQuery.

Be aware that the numbers (store numbers) are not perfectly sequential. Hence the “+ 1” isn’t really a good idea.

How would I code the buttons to cycle through the Select tag options back and forth?

<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: April 5th 2016. Thanks to user2314727, i was able to learn that the “select” can act like an array and the it’s “options” act as the indexed items. and fiddling around with my code again last night through the help of google, i came with the solution below. adding the “.value” keyword to @user…’s contribution, i was able to process the option’s value in the searchObjAry() func.
Only Problem left to fix is to make the PreviousButton cycle back to the bottom of the list and go backwards repeatedly the same way the NextButton works forwardly.

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

Advertisement

Answer

Maybe this will help (select the next tag in the dropdown list by clicking on the 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>
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement