javascript - 显示与下拉选项相关的数据

Question

我有一个下拉列表

<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>

单击一个选项时，我想在同一页面中显示特定选项的详细信息。

如何使用 jquery 实现这一点？

Answer 1

function showval(value) 
{
  
  var text = $("#column_select option:selected").text();
  
  var string = "Value is: "+value+" and Text is: "+text;
  
  $("#showvalue").html(string);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showvalue">
</div>


<select name="column_select" id="column_select" onchange="showval(this.value);">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>

应该对你有帮助。