Jquery 更改 <select> 上 h1 标记的值

Question

类似于我发现的这个小提琴，http://jsfiddle.net/JBjXN/

我正在尝试使用它，因此当我从中选择一个选项时

HTML

<h1>Select a Show</h1>
<select class="radio-line" id="radio-manager" name=“show”>
   <option value=“Show1“>Show 1 - May 9th 2017</option> 
   <option value=“Show2“>Show 2 - May 10th 2017</option>
   <option value=“Show3”>Show 3 - May 11th 2017</option>
</select>

然后它将我的标签的值从 Select a Show 更改为其他文本！如果有人能指出我正确的方向或告诉我我将如何做这件事......谢谢！

Answer 1

您可以执行以下操作：

$(function() {

  //Add event listener to dropdown with class radio-line
  $('.radio-line').change(function() {

    //Get the text of the selected option. Not its value
    var text = $(this).find("option:selected").text();

    //Update the text of h1
    $('h1').text(text);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Select a Show</h1>
<select class="radio-line" id="radio-manager" name=“show”>
	<option value=“Show1“>Show 1 - May 9th 2017</option> 
	<option value=“Show2“>Show 2 - May 10th 2017</option>
	<option value=“Show3”>Show 3 - May 11th 2017</option>
</select>