JavaScript-根据下拉列表中选择的值重定向到页面

Question

我有两个下拉列表与选择值。我已经完成了函数部分，其中从两个下拉列表中选择的值将显示在testpoint.html页面中（如函数所示）。现在，我想根据profile下拉列表中选择的配置文件来分隔页面。

例如，当用户从下拉列表中选择“full”选项时，页面将被重定向到“testpointdrc.html”

(function() {
  function onSubmitClicked(event) {

    var product = document.getElementById('product'),
      productVal = product.value,
      profile = document.getElementById('profile'),
      profileVal = profile.value;
    url = 'testPoint.html?product=' + encodeURIComponent(productVal) + '&profile=' + encodeURIComponent(profileVal);
    location.href = url;

    if (profileVal = "Full DRC") {
      url = "testPointDRC.asp";
    }
  }

  var submitButton = document.getElementById('btngo');
  submitButton.addEventListener('click', onSubmitClicked);
})();

html lang-html prettyprint-override"><table>
  <tr>
    <td>
      <h4>Choose a Product &nbsp: </h4>

      <select id="product"> 
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	</select>
      <br><br>

      <h4>Choose a Profile &nbsp&nbsp&nbsp: </h4>
      <select id="profile"> 
	
	<optgroup label="DEFAULT">
	<option value = "NONE">NONE</option>
	</optgroup>
	<optgroup label="TEST PROFILES">
	<option value = "Full">FULL</option>
	<option value = "QC">QC</option>
	<option value = "Cold">COLD</option>
	<option value = "Hot">HOT</option>
	<option value = "Room">ROOM</option>
	</optgroup>
	</select>
    </td>
  </tr>
</table>
<br><br><br>
<input type="submit" id="btngo" value="Go" class="button button2" />

Answer 1

根据您的想法，使用jQuery和纯JavaScript创建了以下代码。

$(document).ready(function() {
  $('#btngo').on('click', function() {
    var profile = $('.profile').find('option:selected').val(),
      prod = $('.product').find('option:selected').val(),
      url;

    switch (profile) {

      case 'Full':
        url = "testPointFULL.asp?product=" + prod + "&profile=" + profile;
        break;

      case 'QC':
        url = "testPointQC.asp?product=" + prod + "&profile=" + profile;
        break;

      case 'Cold':
        url = "testPointCOLD.asp?product=" + prod + "&profile=" + profile;
        break;

      case 'Hot':
        url = "testPointHOT.asp?product=" + prod + "&profile=" + profile;
        break;

      case 'Room':
        url = "testPointROOM.asp?product=" + prod + "&profile=" + profile;
        break;

      default:
        alert("No option like this");
    }
    if (prod !== "NONE" && profile !== "NONE") {
      window.open(url);
      alert(url);
      $(this).submit();
    } else {
      alert('Selection was not correct');
    }

  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Choose a Product:</h4>
<select class="product">
  <optgroup label="DEFAULT">
    <option value="NONE">NONE</option>
    <option value="Test">Test</option>
  </optgroup>
</select>
<br>
<br>

<h4>Choose a Profile : </h4>
<select class="profile">
  <optgroup label="DEFAULT">
    <option value="NONE">NONE</option>
  </optgroup>
  <optgroup label="TEST PROFILES">
    <option value="Full">FULL</option>
    <option value="QC">QC</option>
    <option value="Cold">COLD</option>
    <option value="Hot">HOT</option>
    <option value="Room">ROOM</option>
  </optgroup>
</select><br><br>
<input type="button" id="btngo" value="Go" class="button button2" />