主页 / 问题 / 978715
Accepted
Дмитрий Котовский
Asked:2020-05-07 02:47:51 +0000 UTC2020-05-07 02:47:51 +0000 UTC

挂在 <option> 所选选项的处理程序上

  • 772

该任务的本质是您需要从选定的选项中打开所需的页面。根据用户在选项 1 中选择的内容，站点 Sobsno 的根目录中有（假设）var1.html、var2.html、var3.html option- 分别打开 var1.html ，与选项 2 和 3 相同。我不知道如何在 js 中正确编写这样一个结构，它将检查option当前选择了哪一个，并相应地检查它的值以打开所需的页面。

function Check_Var(){
    var sel_option = document.getElementByTagName("option");

    if (sel_option.value == "var1") {
       // открыть нужную страницу 
    }
}
*{
	padding: 0;
	margin: 0;
}

#main{
	width: 400px;
	height: 270px;
	border: 1px solid grey;
	margin:  0 auto;
	margin-top: 70px;
}

.avt{
	border-bottom: 1px solid grey;
}

.margin-top{
	margin-top: 50px;
}

.avt_form button{
	margin-top: 20px;
	width: 80px;
}

.avt_form button a{
	color: black;
	text-decoration: none;
}

#sel{
	margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>Авторизация</title>
</head>
<body>

	<div id="main">
		<div class="avt"><center><h1>Авторизация</h1></center></div>
		<div class="avt_form">
			<center>
				<p class="margin-top">Введите имя и фамилию:</p>
				<input type="text" name=""><br/>
				<select name="vars" id="sel">
 				<option selected value="var1">Вариант 1</option>
  				<option value="var2">Вариант 2</option>
  				<option value="var3">Вариант 3</option>
			</select>
			<br/>
				<button> <a href="ask.html" onclick="Check_Var()">Далее</a></button>
			</center>
		</div>
	</div>

</body>
</html>

javascript

2 个回答

  1. Best Answer

    没关系？

    function changeLink(s){
    document.querySelector('#btn')
            .setAttribute('href', s.options[s.selectedIndex].value)
}
    <select name="vars" id="sel" onchange="changeLink(this)">
  <option value="https://ru.stackoverflow.com/" selected>https://ru.stackoverflow.com</option>
  <option value="https://ru.stackoverflow.com/help">https://ru.stackoverflow.com/help</option>
  <option value="https://ru.stackoverflow.com/tour">https://ru.stackoverflow.com/tour</option>
</select>
<br/>
<a id="btn" href="https://ru.stackoverflow.com/"><button>go</button></a>

    • 1

  2. option'ах整个问题是，由于某种原因，当您需要value从它们所在的元素select中获取值时，您正试图四处寻找option'ы。这是HTML的基础。

    在您的示例中：

    <select name="vars" id="sel">
    <option selected value="var1">Вариант 1</option>
    <option value="var2">Вариант 2</option>
    <option value="var3">Вариант 3</option>
</select>

    valueyoption'ов不是值，只是属性。它们是如何传递值select'у的，所以你需要参考它：

    document.getElementById("sel").value

    如果你有一个变态的任务要准确地引用option'ам，那么它应该看起来像这样：

    document.getElementsByTagName("option")[i].getAttribute("value");

    但是会有困难：首先，您必须知道选择了哪个option（select'а以便通过 index 引用它i），其次，您需要以某种方式确定用户选择了这个特定的事实option'а，这将是一项不平凡的任务。当你抽这么多可以解决它时，写，我会告诉你multiple元素的属性select，然后我们会很开心;）

    附言 从评论中构建：

    var sel_option = document.getElementsByTagName("option"); 
alert('Выбрана опция '+sel_option.value);
    • 狂欢。'sel_option' 实际上是一个value没有属性的数组。
    • 0

相关问题