英文:
Redirect page to different URL using select dropdown and submit button
问题
我想创建一个表单，当用户从下拉菜单中选择一个选项并点击提交按钮时，将用户重定向到不同的URL。以下是我的表单的标记：
<form>
<select>
<option selected="">- 选择 -</option>
<option value="https://google.com">One</option>
<option value="https://gmail.com">Two</option>
<option value="https://yahoo.com">Three</option>
</select>
<input type="submit" value="提交">
</form>
Is there anything else you'd like to know or need assistance with?
英文:
I want to create a form that redirect the user to a different URL when they select an option from the select dropdown and click the submit button. Here is the markup for my form below:
<form>
<select>
<option selected="">- Select -</option>
<option value="https://google.com">One</option>
<option value="https://gmail.com">Two</option>
<option value="https://yahoo.com">Three</option>
</select>
<input type="submit" value="Submit">
</form>
答案1
得分: 0
Sure, here is the translated code:
<select id="select_location">
<option selected="">- 选择 -</option>
<option value="https://google.com">One</option>
<option value="https://gmail.com">Two</option>
<option value="https://yahoo.com">Three</option>
</select>
<input type="button" value="提交" onclick="window.location=document.getElementById('select_location').value;">
英文:
<select id="select_location">
<option selected="">- Select -</option>
<option value="https://google.com">One</option>
<option value="https://gmail.com">Two</option>
<option value="https://yahoo.com">Three</option>
</select>
<input type="button" value="Submit" onclick="window.location=document.getElementById('select_location').value;">
答案2
得分: 0
你可以这样做：
<form action="yourLink">
但是，如果你像Oriol Vilaseca建议的那样使用onclick，你可能需要阻止提交事件：
英文:
You can do:
<form action="yourLink">
but if you use onclick as @Oriol Vilaseca suggested, you may need to prevent the submit event:
event.PreventDefault
答案3
得分: 0
以下是翻译好的部分：
SCRIPT部分：
<script>
let selectList = null;
let listButton = null;
window.addEventListener("DOMContentLoaded", getElements);
function getElements(e) {
selectList = document.getElementById("select_location");
listButton = document.getElementById("submitButton");
listButton.addEventListener("click", clickHandler);
}
function clickHandler(e) {
if (selectList.value != "select") {
var win = window.open(selectList.value, "_top");
} else {
alert("在三个选项中进行选择！");
}
}
</script>
HTML部分：
<select id="select_location">
<option selected="" disabled value="select">- 选择 -</option>
<option value="https://google.com">One</option>
<option value="https://gmail.com">Two</option>
<option value="https://yahoo.com">Three</option>
</select>
<input type="button" value="提交" id="submitButton">
英文:
This solution will work but not in the SO snippet:
SCRIPT PART :
<script>
let selectList=null;
let listButton=null;
window.addEventListener("DOMContentLoaded", getElements);
function getElements(e){
selectList = document.getElementById("select_location");
listButton = document.getElementById("submitButton");
listButton.addEventListener("click", clickHandler);
}
function clickHandler(e){
if(selectList.value!="select"){
var win = window.open(selectList.value,"_top");
}else{
alert("Chose between the three options!");
}
}
</script>
HTML PART :
<select id="select_location">
<option selected="" disabled value="select">- Select -</option>
<option value="https://google.com">One</option>
<option value="https://gmail.com">Two</option>
<option value="https://yahoo.com">Three</option>
</select>
<input type="button" value="Submit" id="submitButton">
答案4
得分: -1
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<select>
<option selected="">- 选择 -</option>
<option value="https://google.com">One</option>
<option value="https://gmail.com">Two</option>
<option value="https://yahoo.com">Three</option>
</select>
<button onclick="window.location=document.querySelector('select').value;">提交</button>
<!-- end snippet -->
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<select>
<option selected="">- Select -</option>
<option value="https://google.com">One</option>
<option value="https://gmail.com">Two</option>
<option value="https://yahoo.com">Three</option>
</select>
<button onclick="window.location=document.querySelector('select').value;">Submit</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论