Question

类似于这个小提琴，我发现，http：//jsfiddle.net/JBjXN/ 当我从中选择一个选项时，我试图这样做 HTML ＆lt; h1＆gt;选择显示＆lt; / h1＆gt; ＆lt; select class =＆＃34; radio-line＆＃34; ID =＆＃34;无线电管理器＆＃34; NAME =“节目”＆GT; ＆lt; option value =“Show1”＆gt; Show 1 - 2017年5月9日＆lt; / option＆gt; ＆lt; option value =“Show2”＆gt; Show 2 - 2017年5月10日＆lt; / option＆gt; ＆lt; option value =“Show3”＆gt; Show 3 - 2017年5月11日＆lt; / option＆gt; ＆LT; /选择＆GT; 然后它会将我的标签的值从选择显示更改为其他文本！如果有人能指出我正确的方向或告诉我如何做到这一点......谢谢！

Answer 1

只需添加.change(handler)

即可

$(() => {
  $('#radio-manager').change((e) => {
    $('#to-change').text(`You selected: ${e.target.value}`)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <h1 id="to-change">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>
</form>

Answer 2

您可以执行以下操作：

$(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>

Answer 3

使用.change事件监听器：

＆＃13;

$('#radio-manager').on('change', function() {
  const val = $('#radio-manager').val();
  $('h1').text(val); 
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <h1 id="to-change">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>
</form>

＆＃13;

Answer 4

您需要使用jQuery的change事件。

＆＃13;

$('#radio-manager').change(function() {
  $('h1').text($(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

＆＃13;

Answer 5

.change事件就是你要找的。此事件将允许您在选择项目更改时运行函数：

var h1 = $('.targetChange')

$('.target').change(function(e){
	h1.text($(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 class="targetChange">
Hello
</h1>

<form>
  <select class="target">
    <option value="option 1 selected" selected="selected">Option 1</option>
    <option value="option 2 selected">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

Answer 6

将id添加到h1标记（您想要更改其值），如下面的html

<h1 id='h1_head'>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>

然后将jquery放在脚本标记内。

$("#radio-manager").change(function(){
    var dropdown = this;
  var dropdownValue = $(dropdown).val();
  console.log(dropdownValue);
  $("#h1_head").text(dropdownValue); 
});

上面的JQuery在＆＃39; Select＆＃39;改变了。（如果没有被解雇，请将其放入文件准备就绪，即

$(document).ready(function(){
    $("#radio-manager").change(function(){
        var dropdown = this;
        var dropdownValue = $(dropdown).val();
        $("#h1_head").text(dropdownValue); 
    });
});

Jquery在<select>

6 个答案: