Question

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

例如，当用户选择“全部”时，从下拉列表中选择该页面，该页面将被重定向到＆＃39; testPointDRC.html＆＃39;

需要帮助。

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 1

检查条件后，将location.href = url放置。

 url = some_url;
 If(condition){
   url= new_url;
 }
 location.href=url;

这对你有用。

Answer 2

使用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" />

纯JavaScript

document.getElementById("prod").addEventListener("submit", openNew);

function openNew() {
  var prod = document.getElementById("product"),
    prodSel = prod.options[prod.selectedIndex].value,
    prof = document.getElementById("profile"),
    profSel = prof.options[prof.selectedIndex].value,
    url;

  // alert(profSel);

  switch (profSel) {

    case 'Full':
      url = "testPointFULL.asp?product=" + prodSel + "&profile=" + profSel;
      break;

    case 'QC':
      url = "testPointQC.asp?product=" + prodSel + "&profile=" + profSel;
      break;

    case 'Cold':
      url = "testPointCOLD.asp?product=" + prodSel + "&profile=" + profSel;
      break;

    case 'Hot':
      url = "testPointHOT.asp?product=" + prodSel + "&profile=" + profSel;
      break;

    case 'Room':
      url = "testPointROOM.asp?product=" + prodSel + "&profile=" + profSel;
      break;

    default:
      alert("No option like this");
  }

  if (prodSel !== "NONE" && profSel !== "NONE") {
    window.open(url);
    alert(url);
  } else {
    alert('Selection was not correct');
  }
}

<form id="prod">
  <h4>Choose a Product:</h4>
  <select id="product">
    <optgroup label="DEFAULT">
      <option value="NONE">NONE</option>
      <option value="test">Test</option>
    </optgroup>
  </select>
  <br>
  <br>

  <h4>Choose a Profile : </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>
  <br>
  <br>
  <input type="submit" id="btngo" value="Go" class="button button2" />
</form>

我刚刚添加了alert()，以表明它因某些原因而无法显示重定向。

此处的任何方式都是有效的jsFiddle。

Pure JavaScript jsFiddle

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

2 个答案: