HTML 下拉框重定向答案

【问题标题】：HTML drop down box redirectHTML 下拉框重定向
【发布时间】：2016-02-07 10:25:21
【问题描述】：

只是把一个简单的 html 网页放在一起，我想添加一个下拉框，我将在其中选择一个选项，它会根据选择的内容显示文本。

到目前为止我有这个。我知道我可能不得不使用 javascript，但我不知道从哪里开始。

<html>
<head>
<title> My webpage </title>
</head>
<body>
<h1> Times Tables! </h1>
<p> Click on the drop down box to select the tables you want to see </p>


<select>
<option value="Please select">Please select</option>
<option value="1x0 =0 1x1 =1 1x2 =2 1x3 =3">1 time table</option>
<option value="2 times table">2 times table</option>
<option value="3 times table">3 times table</option>
<option value="4 times table">4 times table</option>
<option value="5 times table">5 times table</option>
<option value="6 times table">6 times table</option>
<option value="7 times table">7 times table</option>
<option value="8 times table">8 times table</option>
<option value="9 times table">9 times table</option>
<option value="10 times table">10 times table</option>
<option value="11 times table">11 times table</option>
<option value="12 times table">12 times table</option>

</select>
<p>
</p>

</body>
</html>

谢谢

【问题讨论】：

标签： javascript html select tags dropdown

【解决方案1】：

如果我正确理解了你的问题..你问的是如何获取所选选项的文本..如果是这样，请将名称和 ID 提供给<select> 框..

<select name='sel_name' id='sel_name' onchange='get_selected()'>

然后使用javascript调用选择框的函数onchange..

function get_selected()
{
//this will get you the selected option's text    
document.getElementById('sel_name').options[document.getElementById('sel_name').selectedIndex].text;

// to just get the value of the select box you can use
document.getElementById('sel_name').value;
}

【讨论】：

【解决方案2】：

您想使用 JavaScript 是对的。事实上，使用 jQuery 来处理事件会更好。

如果你创建一个函数 $('#selectID').on('change', function(){}); （您必须提供您的选择和 ID 来识别它）然后在函数括号内编写代码以执行您想要的操作。在您的情况下，如果要显示某种形式的文本，您可以
alert($('#selectID').val()) 或者只是 jQuery 来改变 DOM

【讨论】：

【解决方案3】：

提供一个 ID 以选择标签。就像

<select id="selected">

然后是 jQuery 代码：

<script type="text/javascript">

    $(document).ready(function(){ 
        $('#selected').change(function(){
        alert($(this).val());                                                          

      });
 </script>

【讨论】：

谢谢！帮助很大