如何根据 html 中的选项/选择重定向用户(单击按钮后)

How to redirect a user based on option/select in html (After clicking a button)

本文关键字:用户 重定向 单击 按钮 选择 何根 html 选项      更新时间:2023-09-26

我是新手,我对JS或CSS
一无所知如何根据所选选项将用户重定向到另一个页面(单击按钮后,而不是选择选项后)
例如,如果我选择Veg并单击"完成"按钮,我应该被带到VegMenu.html如果我选择Non-veg,我应该被带到NonVegMenu.html
我尝试这样做,但是当我选择我不想要的选项时,我被重定向到该页面。我想在按"完成"后被重定向

<input type="text" name="name"></input>
<br><br>
<select id="Opt">
<option>Veg</option>
<option>Non-Veg</option>
</select>
<br><br>
<input type="text" name="age"></input>
<br><br>
<button>Done</button>

使用简单的javascript:

var makePath = function(form) {
  form.action = document.getElementById('Opt').value;
};
<form onsubmit='makePath(this);'>
  <select id="Opt">
    <option value='VegMenu.html' label='Veg' />
    <option value='NonVegMenu.html' label='Non-Veg' />
  </select>
  <button>Done</button>
</form>

您可以使用与此类似的东西(未经测试)

<script>
    function redirectMe() {
        var selectedIndex = document.getElementById("Opt").selectedIndex;
        var selectedText = document.getElementById("Opt").options[selectedIndex].text; 
        if (selectedText == "Veg") {
           location.href = "VegMenu.html";
        }
        else {
           location.href = "NonVegMenu.html";
        }
    }
</script>

<select id="Opt">
    <option>Veg</option>
    <option>Non-Veg</option>
</select>
<button onClick="redirectMe()">Done</button>

$('#but').click(function(e){
  var food = $("#Opt").val();
  if(food == 'Veg')
    location.href = "www.abc.com/veg.html";
  else if (food == "Non-Veg")
    location.href = "www.abc.com/non-veg.html"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Name:
<input type="text" name="name"></input>
<br>
<br>Food:
<select id="Opt">
  <option value="Veg">Veg</option>
  <option value="Non-Veg">Non-Veg</option>
</select>
<br>
<br>Age:
<input type="text" name="age"></input>
<br>
<br>
<button id="but">Done</button>

希望这有帮助。

input type="text" name="name"></input>
<br><br>
<select id="Opt">
<option>Veg</option>
<option>Non-Veg</option>
</select>
<br><br>
<input type="text" name="age"></input>
<br><br>
<button onclick="location.href=(document.getElementById('Opt').selectedIndex==1)?'1.html':'2.html';">Done</button>