HTML - Array for multiple drop down list

Question

Here, I've created two rows of drop down list with respective 'Food/Beverage' and 'Dine In/Take Away' for each row. How can i create an array which allows multiple values to be displayed.

This code (mainTest.html) displays the two rows of drop down lists when multiple values.

(function() {
  /**
   * Handles the click of the submit button.
   */
  function onSubmitClicked(event) {
    // Get the input element from the DOM.
    var beverage = document.getElementById('foodbeverage1');
    var status = document.getElementById('status1');
    // Get the value from the element.
    var beverageValue = beverage.value;
    var status = status.value;
    // Construct the URL.
    var url = 'newPageTest.html?foodbeverage1=' + encodeURIComponent(beverageValue) + '&status1=' + encodeURIComponent(status);

    // Instead of going to the URL, log it to the console.
    location.href = url;
  }
  // Get the button from the DOM.
  var submitButton = document.getElementById('btngo');
  // Add an event listener for the click event.
  submitButton.addEventListener('click', onSubmitClicked);
})();

<!DOCTYPE html>
<html>

<body>

  <h4 style="color:darkblue">Choose Your Food/Beverage & Quantity : </h4>

  <table>
    <tr>
      <td>

        <B>Choose a Food/Beverage : </B>

        <select ID="foodbeverage1"> 
	
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	
	<optgroup label="Food">
	<option value = "Chicken Chop">Chicken Chop</option>
	<option value = "Pasta">Pasta</option>
	<option value = "Pizza">Pizza</option>
	<option value = "Chocolate Cake">Chocolate Cake</option>
	<option value = "Red Velvet Cake">Red Velvet Cake</option>
	<option value = "Ice Cream Cake">Ice Cream Cake</option>
	</optgroup>
	
	<optgroup label="Beverages">
	<option value = "Milk">Milk</option>
	<option value = "Fresh Juice">Fresh Juice</option>
	<option value = "Ice Cream">Ice Cream</option>
	<option value = "Coffee">Coffee</option>
	<option value = "Carbonated Can Drink">Carbonated Can Drink</option>
	<option value = "Water">Water</option>
	</optgroup>
	
	</select>
        <br/>

        <B>Choose a Food/Beverage : </B>

        <select ID="foodbeverage2"> 
	
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	
	<optgroup label="Food">
	<option value = "Chicken Chop">Chicken Chop</option>
	<option value = "Pasta">Pasta</option>
	<option value = "Pizza">Pizza</option>
	<option value = "Chocolate Cake">Chocolate Cake</option>
	<option value = "Red Velvet Cake">Red Velvet Cake</option>
	<option value = "Ice Cream Cake">Ice Cream Cake</option>
	</optgroup>
	
	<optgroup label="Beverages">
	<option value = "Milk">Milk</option>
	<option value = "Fresh Juice">Fresh Juice</option>
	<option value = "Ice Cream">Ice Cream</option>
	<option value = "Coffee">Coffee</option>
	<option value = "Carbonated Can Drink">Carbonated Can Drink</option>
	<option value = "Water">Water</option>
	</optgroup>
	
	</select>
        <br/>

      </td>

      <td>
        <B>Dine In or Take Away : </B>
        <select ID="status1"> 
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	<optgroup label="Status">
	<option value = "Dine In">Dine In</option>
	<option value = "Take Away">Take Away</option>
	</optgroup>
	</select>
        <br/>

        <B>Dine In or Take Away : </B>
        <select ID="status2"> 
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	<optgroup label="Status">
	<option value = "Dine In">Dine In</option>
	<option value = "Take Away">Take Away</option>
	</optgroup>
	</select>
        <br/>
      </td>
    </tr>
  </table>
  <br/>
  <br/>

  <input type="submit" id="btngo" value="Go" />

  <br/>


</body>

</html>

This codes (newPageTest.html) displays the selected values from mainTest.html.

window.onload = passParameters;

//Function to update "showdata" div with URL Querystring parameter values
function passParameters() {
  var foodbeverage = getParameterByName("foodbeverage1");
  var status = getParameterByName("status1");
  if (foodbeverage != null && status != null) {
    var data = "<b>Food Beverages:</b> " + foodbeverage + " <b>Dine/Takeaway:</b> " + status;
    document.getElementById("showdata").innerHTML = data;
  }
}
//Get URL parameter value
function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

<!DOCTYPE html>
<html>

<body>
  <div id="showdata"></div>
</body>

</html>

ivo · Accepted Answer · 2017-08-28 12:37:20Z

1

Normally arrays appear as multiple parameters with the same name. Some (PHP) people name their array params with a [] or [<num>] suffix as well.

var url = 'newPageTest.html?foodbeverage=' + 
          encodeURIComponent(document.getElementById('foodbeverage1').value) + 
          '&foodbeverage=' + 
          encodeURIComponent(document.getElementById('foodbeverage2').value) + 
          '&status=' + 
          encodeURIComponent(document.getElementById('status1').value) + 
          '&status=' + 
          encodeURIComponent(document.getElementById('status2').value);

If you use a multiple select with a form, it will do this for you automatically. If you are building the query string yourself, it would be easier to get elements by class (<select class="foodbeverage"> in the html) and loop over the elements to generate the url.

(function() {

    var url = 'newPageTest.html?';

    var foodbevs = document.getElementsByClassName('foodbeverage');
    for (var i = 0; i < foodbevs.length; i++) {
        if (i > 0) url += '&';
        url += 'foodbeverage=' + encodeURIComponent(foodbevs[i].value)
    }

    var statuses = document.getElementsByClassName('status');
    for (i = 0; i < statuses.length; i++) {
        url += '&status=' + encodeURIComponent(statuses[i].value)
    }
  
    alert(url);   // Show the url for testing

    location.href = url;
})();

    <body>

    <h4 style="color:darkblue">Choose Your Food/Beverage & Quantity : </h4>

    <table>
     <tr>
      <td>

        <B>Choose a Food/Beverage : </B>

        <select class="foodbeverage"> 
	
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	
	<optgroup label="Food">
	<option value = "Chicken Chop">Chicken Chop</option>
	<option value = "Pasta">Pasta</option>
	<option value = "Pizza">Pizza</option>
	<option value = "Chocolate Cake">Chocolate Cake</option>
	<option value = "Red Velvet Cake">Red Velvet Cake</option>
	<option value = "Ice Cream Cake">Ice Cream Cake</option>
	</optgroup>
	
	<optgroup label="Beverages">
	<option value = "Milk">Milk</option>
	<option value = "Fresh Juice">Fresh Juice</option>
	<option value = "Ice Cream">Ice Cream</option>
	<option value = "Coffee">Coffee</option>
	<option value = "Carbonated Can Drink">Carbonated Can Drink</option>
	<option value = "Water">Water</option>
	</optgroup>
	
	</select>
        <br/>

        <B>Choose a Food/Beverage : </B>

        <select class="foodbeverage"> 
	
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	
	<optgroup label="Food">
	<option value = "Chicken Chop">Chicken Chop</option>
	<option value = "Pasta">Pasta</option>
	<option value = "Pizza">Pizza</option>
	<option value = "Chocolate Cake">Chocolate Cake</option>
	<option value = "Red Velvet Cake">Red Velvet Cake</option>
	<option value = "Ice Cream Cake">Ice Cream Cake</option>
	</optgroup>
	
	<optgroup label="Beverages">
	<option value = "Milk">Milk</option>
	<option value = "Fresh Juice">Fresh Juice</option>
	<option value = "Ice Cream">Ice Cream</option>
	<option value = "Coffee">Coffee</option>
	<option value = "Carbonated Can Drink">Carbonated Can Drink</option>
	<option value = "Water">Water</option>
	</optgroup>
	
	</select>
        <br/>

      </td>

      <td>
        <B>Dine In or Take Away : </B>
        <select class="status"> 
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	<optgroup label="Status">
	<option value = "Dine In">Dine In</option>
	<option value = "Take Away">Take Away</option>
	</optgroup>
	</select>
        <br/>

        <B>Dine In or Take Away : </B>
        <select class="status"> 
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	<optgroup label="Status">
	<option value = "Dine In">Dine In</option>
	<option value = "Take Away">Take Away</option>
	</optgroup>
	</select>
        <br/>
      </td>
    </tr>
  </table>
  <br/>
  <br/>

  <input type="submit" id="btngo" value="Go" />

  <br/>


</body>

However, it looks like your parsing of params on the result page is not handling arrays properly. See the answer here for a better query string parser Parse query string in JavaScript

function parseQuery(str)
    {
        if(typeof str != "string" || str.length == 0) return {};
        var s = str.split("&");
        var s_length = s.length;
        var bit, query = {}, first, second;
        for(var i = 0; i < s_length; i++)
            {
            bit = s[i].split("=");
            first = decodeURIComponent(bit[0]);
            if(first.length == 0) continue;
            second = decodeURIComponent(bit[1]);
            if(typeof query[first] == "undefined") query[first] = second;
            else if(query[first] instanceof Array) query[first].push(second);
            else query[first] = [query[first], second]; 
            }
        return query;
    }

    //Function to update "showdata" div with URL Querystring parameter values
    function passParameters() {
      var queryStr = window.location.search 
      
 /////////////////////////////////////////////
 // Remove the following line and add ; at end of line above if not testing.
   || 'foodbeverage=Pizza&foodbeverage=Pasta&status=Dine+In&status=Take+Away';
 ////////////////////////////////////////////
      
      var query = parseQuery(queryStr);
        var data = "<b>Food Beverages:</b> " + query.foodbeverage + " <b>Dine/Takeaway:</b> " + query.status;
        document.getElementById("showdata").innerHTML = data;
    }
    
window.onload = passParameters;

<html>

<body>
  <div id="showdata"></div>
</body>

</html>

In the above, query.foodbeverage and query.status can be arrays. You could loop through them to print them row by row.

edited Aug 28, 2017 at 12:37

answered Aug 28, 2017 at 2:57

ivo

1,11310 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

cerberus99 Over a year ago

Thanks for the clarification. What if I have multiple of rows consisting the drop down list?

ivo Over a year ago

You can construct the url string as I've done in the example. But you'd probably be better off making the foodbeverage selects with a foodbeverage class so you can find them all and build the url string without worrying about how many selects there are and the index numbers.

cerberus99 Over a year ago

Thank you once again. Do you mind showing an example on how to do it?

cerberus99 Over a year ago

The page fails to redirect

ivo Over a year ago

I added the redirect to the example. I'm just showing you all the concepts so you can understand what to do and put it together yourself.

|

toastrackengima · Accepted Answer · 2017-08-28 02:41:58Z

0

Do you mean something like <select multiple>?

<select multiple>
  <option>First Option</option>
  <option>Second Option</option>
  <option>Third Option</option>
</select>

Hold ctrl / cmd while selecting items to select more than one.

answered Aug 28, 2017 at 2:41

toastrackengima

9,0795 gold badges55 silver badges64 bronze badges

1 Comment

cerberus99 Over a year ago

Thank you but what I need is that when I select the values from the first row and second row of drop down list, all the selected values will be displayed in the newPageTest.html. Note : Each row has two drop down list.

Collectives™ on Stack Overflow

HTML - Array for multiple drop down list

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related