how to call options from select dropdown

Question

So I am making this golf stat tracking website that I will eventually make into an app, but this part is really causing me to hit a snag. Basically, I am looking to make a function that will load the pars for a course selected by a dropdown menu. However, I am not sure if I have to create many variables to achieve this or just enough to cover the span of 3 holes before the cycle starts again. 'ex. (4-3-5 and 3-5-4) are the only patterns that are able as you can only select a game of 3, 9 or 18 holes' Thanks for the help sorry if this is too complicated or hard to understand. Also disregard the error of courseSelect not being defined as this is where the question I am asking stems from.

Here is the code

<!DOCTYPE html>
<html>
  <script>
    function showInput() {
        document.getElementById('display1').innerHTML = 
                    document.getElementById("user_input1").value;
        document.getElementById('display2').innerHTML = 
                    document.getElementById("user_input2").value;
  document.getElementById('display3').innerHTML = 
                    document.getElementById("user_input3").value;
  document.getElementById('display4').innerHTML = 
                    document.getElementById("user_input4").value;    
}
 function courseSelect() {
  //////if document.getElementById('mySelect').innerHTML = 
     
}
  </script>
<body>

  <form>
 <input type="text" name="name1" id="user_input1"><br>
 <input type="text" name="name2" id="user_input2"><br>
 <input type="text" name="name3" id="user_input3"><br>
 <input type="text" name="name4" id="user_input4">
  </form>

  <input type="submit" onclick="showInput();"><br>  
  <label>Players: </label><br>
  <span id='display1'></span><br>
  <span id='display2'></span><br>
  <span id='display3'></span><br>
  <span id='display4'></span><br>
  
  <select id="mySelect" onchange="courseSelect()">
  <option disabled selected value> -- select a course -- </option>
  <option value="Bossame Tournament">Bossame Tournament</option>
  <option value="OSLA Open">OSLA Open</option>
  <option value="The Closed Tournament">The Closed Tournament</option>
  <option value="IWGA Championship">IWGA Championship</option>
  <option value="The Lawnmower Classic">The Lawnmower Classic</option>
  <option value="My World Match Play">My World Match Play</option>
  <option value="The Seasonal Championship">The Seasonal Championship</option>
  <option value="The ABC Mexican Open">The ABC Mexican Open</option>
  <option value="The Pomponians Championship">The Pomponians Championship</option>
  <option value="AB World Tour Championship">Anthony Burke World Tour Championship</option>
  <option value="Never Be Royals Tournament">Never Be Royals Tournament</option>
  <option value="The Huggy McGurber Invitational">The Huggy McGurber Invitational presented by Glakeside Resorts</option>
  <option value="Thee Grind">Thee Grind</option>
  <option value="Glakeside Classic">Glakeside Classic</option>
  <option value="Resorts World Bimini Challenge">Resorts World Bimini Challenge</option>
  <option value="World Golf Classic">World Golf Classic</option>
</select>

<p id="course"></p>
<table id="scorecard"></table>
<table>

</table>

  
</body>
</html>

You need to first ensure there are no syntax errors in your code. I can see the select element code is missing tags for most options. Please fix all syntax errors and run the the code snippet to ensure the problem is replicated exactly as you are facing in your development model. Thanks. — Hussain Niazi, Sep 05 '18 at 23:13
@HussainNiazi thanks this is how the code appears in the model — drent2001, Sep 05 '18 at 23:24
I am not able to understand your requirement, probably because I don't know anything about golf. You may either explain in a little bit more detail or wait for someone with golf knowledge to help you out. However, I am guessing that you want to create variables or elements dynamically? If that is the case then you can use a javascript hash. Or you can create elements dynamically following this tutorial https://www.w3schools.com/js/js_htmldom_nodes.asp — Hussain Niazi, Sep 05 '18 at 23:47
Perhaps you should checkout [this answer](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript). — El_Cacto, Sep 06 '18 at 00:13
@HussainNiazi ok i want that when i select an option from the dropdown, that it will load a string of numbers that are assigned to each option hope that makes it clearer — drent2001, Sep 06 '18 at 00:24
Why don't you make that string of numbers the value of options? Example . This way the user will choose "Bossame Tournament" in the drop down. But you will be able to access the value of this option using document.getElementById('mySelect').value . Still not sure if this is what you want but still let me know if its not what u are looking for — Hussain Niazi, Sep 06 '18 at 10:24
@HussainNiazi yeah thats what i was thinking i would do thank you for the help — drent2001, Sep 06 '18 at 11:29
@drent2001 See my answer, it will help you with the use of arrays (i.e. series of numbers) and show you how to iterate through groups of DOM elements like ` — zer00ne, Sep 06 '18 at 13:11
@zer00ne great answer, gave me everything i was looking for and even helped me learn a lot in the process. Thanks to all! — drent2001, Sep 06 '18 at 16:58

zer00ne · Accepted Answer · 2018-09-06T13:05:19.600

`<select><option>` to `<table><td>`

The demo provided below demonstrates how to:

get the data from a selected <option>
convert the data to arrays
collect <td> into arrays
distribute the data arrays to the <td>s

Also, the overall OP (i.e. Original Post) code provided has been changed to show how the use of for loops and NodeLists/HTMLCollections can be more efficient than the repetitive use of single references.

The Anatomy of an `<option>`

If I understood correctly you want a list of par ratings for each hole in a golf course selected in a <select>. You did not provide these numbers so I added a new course (at index 1 of the <option>s.) In the demo there's only one <option> that's modified you'll have to provide the data for the rest of them yourself:

<option value="72" data-par='4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4' data-yards='445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465'>Masters Championship</option>

Normally, this data is in a database and sent in the form of a JSON, but because of the static nature of the data (golf courses don't change that often) this is a feasible way of listing golf course stats.

Getting the Data from `<option>`

value attribute is "72" for all golf courses because it's the most common par rating for 18 holes (I don't know of any professional tournaments that play 3 or 9.) To get this value:
- Reference the element and suffix it with the .value property:
  
  var selectElement = document.getElementById('ID of select');
  var selectValue = selectElement.value;
data-* attributes, such as data-par and data-yards, can have any arbitrary String value but it isn't as simple as value to access:
- Collect all <options> of <select> into a HTMLCollection by suffixing reference to <select> with the .options property:
  
  var optionsList = selectElement.options;
Note: I added yards per hole because it's always included with par ratings.
- Then reference the selected <option>:
  
  var optionData = optionList[selectElement.selectedIndex];
- Next, use .dataset method and suffix it with the suffix of data-par and data-yards (i.e. par and yards):
  
  var dataPar = optionData.dataset.par;
  var dataYards = optionData.dataset.yards;
Getting the text inside <option>Text Content</option>, is similar to the previous procedure:
- Continued from the previous example using optionData which references the selected <option>:
  
  var optionText = optionData.text;

Summary

At this point you have four strings of data:

selctValue = "72"

dataPar = "4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4"
dataYards = "445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465"

optionText = "Masters Championship"

Of the four strings of data, group 2. dataPar and dataYards need to be converted into arrays. To move group 1. selectValue to a <td> and group 3. optionText to a <caption>:

var coursePar = document.getElementById('ID of td');
var courseTitle = document.querySelector('caption');
coursePar.innerHTML = selextedValue;;
courseTitle.textContent = optionText;

Note: In this case .textContent and .innerHTML properties are interchangeable, but it is important to know how they are different so refer to the Reference section for details.

Converting `<option>` Data Into Arrays

There are two data strings that appear as a series of numbers, but they are not:

dataPar = "4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4"
dataYards = "445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465"

If used in this state, it would show up as the same literal text in each <td>:

INCORRECT RESULT

A string: "445,575,350,240"
<td>445,575,350,240</td>

If converted into an Array of Strings each number is considered separately:

CORRECT RESULT

An array: ["445","575","350","240"]
<td>445</td><td>575</td><td>350</td><td>240</td>

In this case use the array method split() to convert a String by targeting a delimiter (i.e. the commas: ,):

Each array will now be in this form: array = ["1","2","3"]

var parArray = dataPar.split(',');
var yardsArray = dataYards.split(',');

Summary

At this point there are two Arrays:

An array of par ratings for 18 holes:

parArray = ["4","5","4","3","4","3","4","5","4","4","4","3","5","4","5","3","4","4"]
An array of yardages for 18 holes:

yardsArray = ["445","575","350","240","455","180","450","570","460","495","505","155","510","440","530","170","440","465"]

Convert NodeLists of `<td>s` to Array of `<td>s`

For each array of data a row (i.e. <tr>) of cells (i.e. <td>) need to be referenced in an array. Here's the procedure laid out in a few lines:

Collect all <td> of a specific <tr> into a NodeList:

var parRow = document.getElementById('trOfPar');
var NodeListOfParTD = parRow.querySelectorAll('td');
Convert NodeList to an array:

var ArrayOfParTD = Array.from(NodeListOfParTD);

For the sake of expediency the second array is: ArrayOfYardsTD.

Summary

At this point there are four arrays:

Two arrays from the <option> attributes data-par and data-yards:

parArray = ["4","5","4","3","4","3","4","5","4","4","4","3","5","4","5","3","4","4"]

yardsArray = ["445","575","350","240","455","180","450","570","460","495","505","155","510","440","530","170","440","465"]
Two arrays of <td>s from two separate <tr>s:

arrayOfParTD = [<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>]

arrayOfYardsTD = [<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>]

Set the Arrays of `<option>s` Data to the Arrays of `<td>`

To manipulate arrays a for loop is usually adequate. To manipulate arrays in a less verbose and more efficient way, array methods can be used instead. The array method .forEach() will take an array and run a function on each array element:

For the sake of expediency,
- tdArray is the same as arrayOfParTD and arrayOfYardsTD
- dataArray is the same as parArray and yardsArray
  
  tdArray.forEach(function(td, index) {
  td.textContent = dataArray[index];
  });

Summary

The final result should be:

th,td{border:1px solid #000;text-align:center}
th{text-align:left}

<table>
  <tr id="trOfPar"><th>Par: </th><td>4</td><td>5</td><td>4</td><td>3</td><td>4</td><td>3</td><td>4</td><td>5</td><td>4</td><td>4</td><td>4</td><td>3</td><td>5</td><td>4</td><td>5</td><td>3</td><td>4</td><td>4</td></tr>
  <tr id='trOfYards'><th>Yards: </th><td>445</td><td>575</td><td>350</td><td>240</td><td>455</td><td>180</td><td>450</td><td>570</td><td>460</td><td>495</td><td>505</td><td>155</td><td>510</td><td>440</td><td>530</td><td>170</td><td>440</td><td>465</td></tr>
</table>

Reference

Get/Set Values
Get/Set Multiple Values
Array Methods
Used in Demo
- parseInt()
Array Methods in Demo
- .map()
- .reduce()

Demo

The code presented in the previous sections is not the same as the code in the demo but similar enough hopefully. Each line of JavaScript is commented.

function listPlayers() {

  /* 
  Collect all <input>s and <td class="player">s
  into the NodeLists inputs and outputs respectively.
  */
  var inputs = document.querySelectorAll('input');
  var outputs = document.querySelectorAll('.player');

  /*
  For each iteration of outputs set its text to the
  corresponding index of inputs value.
  */
  for (let i = 0; i < outputs.length; i++) {
    outputs[i].textContent = inputs[i].value;
  }
  return false;
}

function courseSelect() {

  // <select id='tournaments'>
  var select = document.getElementById('tournaments');

  // HTMLCollection of all <option>s in select#tornaments
  var opts = select.options;

  // <caption>
  var title = document.querySelector('caption');

  // The last two <td> on <table id='course'>
  var pT = document.getElementById('pT');
  var yT = document.getElementById('yT');

  /*
  Set the inside HTML of <td id='pT'> to a String:
  ...that comprises of the text: "Course Par: "...
  ...followed by the value of <select id='tournaments'>
  */
  pT.innerHTML = "Course Par: " + select.value;

  /*
  Set the text of <caption> to the text of the selected
  <option>THIS TEXT</option>
  */
  title.textContent = opts[select.selectedIndex].text;

  /*
  Get the values of [data-par] and [data-yards] from the
  selected <option>
  */
  var dataPar = opts[select.selectedIndex].dataset.par;
  var dataYards = opts[select.selectedIndex].dataset.yards;

  /* 
  Convert each of the Strings from [data-par] and 
  [data-yards] into arrays of Strings.
  */
  // Array of par ratings of each hole
  var parArray = dataPar.split(',');
  // Array of yardages of each hole
  var yardsArray = dataYards.split(',');

  /* 
  Collect the <td>s of <tr id='par'> and <tr id='yards'>
  into separate NodeLists then convert each into an Array.
  */
  var parCells = Array.from(document.querySelectorAll('#par td'));
  var yardsCells = Array.from(document.querySelectorAll('#yards td'));

  /*
  Fill each cell of tr#par with a value from the array of
  par ratings according to matching index.
  */
  parCells.forEach(function(par, index) {
    par.textContent = parArray[index];
  });

  /*
  Fill each cell of tr#yards with a value from the array 
  of yardages according to matching index.
  */
  yardsCells.forEach(function(yards, index) {
    yards.textContent = yardsArray[index];
  });

  /* 
  Convert each String value of the array of yardages into
  a real Number
  */
  var yardage = yardsArray.map(function(yrd) {
    return parseInt(yrd, 10);
  });

  /*
  Get the sum of all of the Numbers in the new array.
  Note: the function addArray() is located outside of this
  function.
  */
  var totalYards = yardage.reduce(addArray);

  // Set the total yards in td#yT
  yT.innerHTML = "Yardage: " + totalYards;

  return false;
}

/*
Utility function used to add two numbers.
The return value is used as a parameter to a
Array.reduce() method that runs an array's values
accumulatively.
*/
function addArray(total, number) {
  return total + number;
}

th,
td {
  border: 1px solid #000
}

caption {
  font-size: 1.2rem;
  font-weight: 900
}

#course th {
  text-align: left
}

#course td,
.c {
  text-align: center
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <form id='golf'>
    <fieldset id='players'>
      <legend>Players</legend>
      <input type="text" name="name1" id="p1"><br>
      <input type="text" name="name2" id="p2"><br>
      <input type="text" name="name3" id="p3"><br>
      <input type="text" name="name4" id="p4"><br>
      <button id='btn1' type="button" onclick='listPlayers()'>Done</button>

    </fieldset>

    <fieldset id='games'>
      <legend>Tournaments</legend>
      <select id="tournaments" onchange="courseSelect()">
        <option disabled selected value=""> -- select a course -- </option>
        <option value="72" data-par='4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4' data-yards='445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465'>Masters Championship</option>
        <option value="72" data-par='' data-yards=''>Bossame Tournament</option>
        <option value="72" data-par='' data-yards=''>OSLO Open</option>
        <option value="72" data-par='' data-yards=''>The Closed Tournament</option>
        <option value="72" data-par='' data-yards=''>IWGA Championship</option>
        <option value="72" data-par='' data-yards=''>The Lawnmower Classic</option>
        <option value="72" data-par='' data-yards=''>My World Match Play</option>
        <option value="72" data-par='' data-yards=''>The Seasonal Championship</option>
        <option value="72" data-par='' data-yards=''>The ABC Mexican Open</option>
        <option value="72" data-par='' data-yards=''>The Pomponians Championship</option>
        <option value="72" data-par='' data-yards=''>Anthony Burke World Tour Championship</option>
        <option value="72" data-par='' data-yards=''>Never Be Royals Tournament</option>
        <option value="72" data-par='' data-yards=''>The Huggy McGurber Invitational presented by Glakeside Resorts</option>
        <option value="72" data-par='' data-yards=''>Thee Grind</option>
        <option value="72" data-par='' data-yards=''>Glakeside Classic</option>
        <option value="72" data-par='' data-yards=''>Resorts World Bimini Challenge</option>
        <option value="72" data-par='' data-yards=''>World Golf Classic</option>
      </select>
      <br>
      <hr>

      <table id="leaderboard" width="100%">
        <caption></caption>
        <thead>
          <tr>
            <th width='55%'>Golfer</th>
            <th width='5%'>toPar</th>
            <th width='5%'>Thru</th>
            <th width='5%'>Today</th>
            <th width='5%'>R1</th>
            <th width='5%'>R2</th>
            <th width='5%'>R3</th>
            <th width='5%'>R4</th>
            <th width='10%'>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class='player'></td>
            <td class='c'></td>
            <td class='c'>F</td>
            <td class='c'></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td class='player'></td>
            <td class='c'></td>
            <td class='c'>F</td>
            <td class='c'></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td class='player'></td>
            <td class='c'></td>
            <td class='c'>F</td>
            <td class='c'></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td class='player'></td>
            <td class='c'></td>
            <td class='c'>F</td>
            <td class='c'></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>

      </table>
      <table id='course'>
        <tbody>
          <tr id='holes'>
            <th>Hole: </th>
            <td>&nbsp;1&nbsp;</td>
            <td>&nbsp;2&nbsp;</td>
            <td>&nbsp;3&nbsp;</td>
            <td>&nbsp;4&nbsp;</td>
            <td>&nbsp;5&nbsp;</td>
            <td>&nbsp;6&nbsp;</td>
            <td>&nbsp;7&nbsp;</td>
            <td>&nbsp;8&nbsp;</td>
            <td>&nbsp;9&nbsp;</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
          </tr>
          <tr id='par'>
            <th>Par: </th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr id='yards'>
            <th>Yards: </th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>Totals: </th>
            <td id='pT' colspan='9'></td>
            <td id='yT' colspan='9'></td>
          </tr>
        </tfoot>
      </table>

    </fieldset>
  </form>



</body>

</html>

one other thing pertaining to the yardage, so since the hole positions on the green change how would i go about changing the yardage without having to edit the source code? would i just use a div class to make the table editable? — drent2001, Sep 06 '18 at 19:26
Placing an editable div inside the td would work well. If you do that, don't forget to change selectors so that they target the divs instead: ex. `yardsRow.querySelectorAll("td div");` — zer00ne, Sep 06 '18 at 20:22

score 0 · Answer 2 · answered Sep 07 '18 at 01:15

To write the fully functional program we will need to know the game rules. According to the info you have given us, we can write an abstract model of a working program. Let your users or players select the number of holes e.g. 3,9,18. We can assume that two players can compete for the scores / points, the one with the high score or points wins the game. Each player will score points according to the game rules. Your form should be user friendly. Help the user by labelling the user input. You have given us four input text box for the players. So we can assume that four players are competing instead of two. Default values can be misleading, it is better to define the value of your button, your users will know what to expect when they click the button. You have given us the list of tournaments and championships. That's quite helpful in analysing this project. The solution can be two folds. First you will need the data about the games. i.e. scores, players, tournaments, dates. Once you have the data, you can use it to generate useful information like stats. To achieve that goal you will need full stack technologies. For example, html, JavaScript, PHP or Java or Python, MySQL or PostgreSQL. You can always use variables on your front end, but the lifetime of a variable is short and happy. Once the user exit the program the info is gone. On the other hand if you only want to make “ this golf stat tracking website ”. The starting point will be to define the game rules. Create or design the user interface. Design or create database. Collect data. Store data. Retrieve data. Process data. Display information. Good luck!

//
<!DOCTYPE html>
<!--
index.html
-->
<html>
<head>
    <title>Golf stat tracking.</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        var course = "C1";
        var player1 = "P1";
        var player2 = "P2";
        var player3 = "P3";
        var player4 = "P4";
        var probability = [];
        function showInput() {
        document.getElementById('display1').innerHTML = document.getElementById("user_input1").value;
        document.getElementById('display2').innerHTML = document.getElementById("user_input2").value;
        document.getElementById('display3').innerHTML = document.getElementById("user_input3").value;
        document.getElementById('display4').innerHTML = document.getElementById("user_input4").value;
        player1 = document.getElementById("user_input1").value;
        player2 = document.getElementById("user_input2").value;
        player3 = document.getElementById("user_input3").value;
        player4 = document.getElementById("user_input4").value;
        stats(course);
        }
        function courseSelect() {
        ///////////////////////////////////////////////////////////    
        //////if document.getElementById('mySelect').innerHTML = //
        ///////////////////////////////////////////////////////////
        course = document.getElementById('mySelect').value;
        //alert(course);
        document.getElementById('p1').value = player1;
        document.getElementById('p2').value = player2;
        document.getElementById('p3').value = player3;
        document.getElementById('p4').value = player4;
        document.getElementById('c1').value = course;
        stats(course);
        }
        function stats(cor){
            var cors = cor;
            var comment = [
                "Win or lose.",
                "My favorate player.",
                "Against the wind.",
                "Best of the best.",
                "Only time will tell.",
                "The champ."
            ];
            var players = [
              player1, player2,
              player3, player4
            ];
            var coml = comment.length;
            var pll = players.length;
            var ranc = (Math.random() * (coml - 1));
            var ranc2 = (Math.random() * (coml - 1));
            var ranp = (Math.random() * (pll - 1));
            var ranp2 = (Math.random() * (pll - 1));
            for(var i = 0; i < coml; i++)
            {
               ranc = (Math.random() * (coml - 1));
               ranc2 = (Math.random() * (coml - 1));
               ranp = (Math.random() * (pll - 1));
               ranp2 = (Math.random() * (pll - 1));
            }
            //alert(coml + " " + ranc + " " + Math.round(ranc) + " " + ranc2 + " " + Math.round(ranc2) );
            document.getElementById('pl1').value = players[Math.round(ranp)];
            document.getElementById('pl2').value = players[Math.round(ranp2)];
            var pp1 = document.getElementById('pl1').value;
            var pp2 = document.getElementById('pl2').value;
            probability.push(pp1);
            var prl = probability.length;
            var pp1p = 0;
            var pp2p = 0;
            for(var i = 0; i < prl; i++)
            {
                if(pp1 === probability[i])
                {
                    pp1p++;
                }
                else if (pp2 === probability[i])
                {
                    if(pp1 !== pp2)
                    {
                       pp2p++; 
                    }
                }
            }
            document.getElementById('sc').value = cors;
            document.getElementById('comm1').value = "p("+pp1p +"/" + prl + ") " + comment[Math.round(ranc)];
            document.getElementById('comm2').value = "p("+pp2p +"/" + prl + ") " + comment[Math.round(ranc2)];
            document.getElementById('sco1').value = ranc;
            document.getElementById('sco2').value = ranc2;
            if (pp1 === pp2)
            {
                document.getElementById('pl1').value = player1;
                document.getElementById('pl2').value = player2;
                document.getElementById('comm1').value = comment[Math.round(ranc)];
                document.getElementById('comm2').value = comment[Math.round(ranc2)];
            }
        }

    </script>
</head>
<body>
    <div>Golfers:</div>
    <form>
        Name1
        <input type="text" name="name1" id="user_input1"><br>
        Name2
        <input type="text" name="name2" id="user_input2"><br>
        Name3
        <input type="text" name="name3" id="user_input3"><br>
        Name4
        <input type="text" name="name4" id="user_input4">
    </form>

    <input type="submit" value="OK" onclick="showInput();"><br>
    <label>Players: </label><br>
    <span id='display1'></span><br>
    <span id='display2'></span><br>
    <span id='display3'></span><br>
    <span id='display4'></span><br>
    <hr>
    <br>
    Course:
    <select id="mySelect" onchange="courseSelect()">
    <option disabled selected value> -- select a course -- </option>
    <option value="Bossame Tournament">Bossame Tournament</option>
    <option value="OSLA Open">OSLA Open</option>
    <option value="The Closed Tournament">The Closed Tournament</option>
    <option value="IWGA Championship">IWGA Championship</option>
    <option value="The Lawnmower Classic">The Lawnmower Classic</option>
    <option value="My World Match Play">My World Match Play</option>
    <option value="The Seasonal Championship">The Seasonal Championship</option>
    <option value="The ABC Mexican Open">The ABC Mexican Open</option>
    <option value="The Pomponians Championship">The Pomponians Championship</option>
    <option value="AB World Tour Championship">Anthony Burke World Tour Championship</option>
    <option value="Never Be Royals Tournament">Never Be Royals Tournament</option>
    <option value="The Huggy McGurber Invitational">The Huggy McGurber Invitational presented by Glakeside Resorts</option>
    <option value="Thee Grind">Thee Grind</option>
    <option value="Glakeside Classic">Glakeside Classic</option>
    <option value="Resorts World Bimini Challenge">Resorts World Bimini Challenge</option>
    <option value="World Golf Classic">World Golf Classic</option>
    </select>

    <div>
        <h1>Score Card</h1>
        <form action='pathto/golfers.php' method='POST'>
            <table>
                <tr><td>Holes:</td>
                    <td><select name="holes">
                            <option selected="selected" value="3">3</option>
                            <option value="9">9</option>
                            <option value="18">18</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Player</td><td>Score</td><td>Comment</td>
                </tr>
                <tr><td><input type="text" name="p1" id="p1"></td>
                    <td><input type="text" name="sc1"></td>
                    <td><input type="text" name="com1"></td>
                </tr>
                <tr><td><input type="text" name="p2" id="p2"></td>
                    <td><input type="text" name="sc2"></td>
                    <td><input type="text" name="com2"></td>
                </tr>
                <tr><td><input type="text" name="p3" id="p3"></td>
                    <td><input type="text" name="sc3"></td>
                    <td><input type="text" name="com3"></td>
                </tr>
                <tr><td><input type="text" name="p4" id="p4"></td>
                    <td><input type="text" name="sc4"></td>
                    <td><input type="text" name="com4"></td>
                </tr>
                <tr>
                    <td>Date:</td>
                    <td><input type="date" name="date"></td>
                </tr>
                <tr>
                    <td>Time:</td>
                    <td><input type="time" name="time"></td>
                </tr>
                <tr>
                    <td>Course:</td>
                    <td><input type="text" name="c1" id="c1" readonly=""></td>
                </tr>
                <tr>
                    <td><input type="submit" value="OK"></td>
                </tr>
            </table>
        </form>
    </div>
    <div>
        <h1>STATS</h1>
        <table>
            <tr>
                <td>Player</td><td>Stats</td><td>Comment</td>
            </tr>
            <tr><td><input type="text" name="pl1" id="pl1" readonly=""></td>
                <td><input type="text" name="sco1" id="sco1" readonly=""></td>
                <td><input type="text" name="comm1" id="comm1"></td>
            </tr>
            <tr><td><input type="text" name="pl2" id="pl2" readonly=""></td>
                <td><input type="text" name="sco2" id="sco2" readonly=""></td>
                <td><input type="text" name="comm2" id="comm2"></td>
            </tr>
            <tr><td><input type="text" name="pl3" id="pl3" readonly=""></td>
                <td><input type="text" name="sco3" readonly=""></td>
                <td><input type="text" name="comm3" id="comm3"></td>
            </tr>
            <tr><td><input type="text" name="pl4" id="pl4" readonly=""></td>
                <td><input type="text" name="sco4" readonly=""></td>
                <td><input type="text" name="comm4" id="comm4"></td>
            </tr>
            <tr>
                <td>Date:</td>
                <td><input type="date" name="sdate" readonly=""></td>
            </tr>
            <tr>
                <td>Time:</td>
                <td><input type="time" name="stime" readonly=""></td>
            </tr>
            <tr>
                <td>Course:</td>
                <td><input type="text" name="scourse" id="sc" readonly=""></td>
            </tr>
        </table>
    </div>
    <br>
    <hr>
    <br>
</body>
</html>
//

how to call options from select dropdown

2 Answers2

<select><option> to <table><td>

The Anatomy of an <option>

Getting the Data from <option>

Summary

Converting <option> Data Into Arrays

Summary

Convert NodeLists of <td>s to Array of <td>s

Summary

Set the Arrays of <option>s Data to the Arrays of <td>

Summary

Reference

Demo

`<select><option>` to `<table><td>`

The Anatomy of an `<option>`

Getting the Data from `<option>`

Converting `<option>` Data Into Arrays

Convert NodeLists of `<td>s` to Array of `<td>s`

Set the Arrays of `<option>s` Data to the Arrays of `<td>`