Question

在这里，我创建了两行下拉列表，每行包含“Food / Beverage”和“Dine In / Take Away”。如何创建一个允许显示多个值的数组。

当多个值时，此代码（mainTest.html）显示两行下拉列表。

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

此代码（newPageTest.html）显示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>

Answer 1

通常，数组显示为具有相同名称的多个参数。一些（PHP）人员也使用[<num>]或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);后缀命名他们的数组参数。

<select class="foodbeverage">

如果您对表单使用多重选择，它将自动为您执行此操作。如果您自己构建查询字符串，则按类（html中的(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; })();）获取元素会更容易，并循环遍历元素以生成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>

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;

但是，看起来您在结果页面上解析params并不能正确处理数组。请参阅此处的答案，以获得更好的查询字符串解析器Parse query string in JavaScript

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

target_link_libraries(BUILD_ARTIFACT pthread)

在上面，query.foodbeverage和query.status可以是数组。您可以循环遍历它们以逐行打印它们。

Answer 2

你的意思是<select multiple>吗？

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

按住 ctrl / cmd ，同时选择要选择的项目。

HTML - 多个下拉列表的数组

2 个答案: