Question

我正在编写一个脚本，根据选择菜单中的用户输入更改范围文本值。

我的当前脚本有问题。如何修复它，以便当我单击“结束日期”然后再次单击“开始日期”时，它会在跨度中显示“开始日期”？

$(function() {
  $('#usertype').change(function() {
    $(this).next("span").text("End Date");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
  <input type="hidden" id="myhidden3" name="quantity" value="1" />
  <select id='usertype'>
        <option value='1'>Start Date</option>
        <option value='2'>End Date</option>
        <option value='3'>End Date</option>
      </select>
  <span>Start Date</span>
</form>

Answer 1

这样做

＆＃13;

$(function() {
  $('#usertype').change(function() {
     $(this).next("span").text($('#usertype option:selected').text());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
  <input type="hidden" id="myhidden3" name="quantity" value="1" />
  <select id='usertype'>
        <option value='1'>Start Date</option>
        <option value='2'>End Date</option>
        <option value='3'>End Date</option>
      </select>
  <span>Start Date</span>
</form>

＆＃13;

Answer 2

像这样：

$(function() {         
    $('#usertype').change(function() {        
        let text=$(':selected',this).text();
        $(this).next("span").text(text);
    });     
});

Answer 3

您需要确定所选选项，然后确定该选项中的文本。

 $(function() {         
    $('#usertype').change(function() { 
        var selectedText = $("#usertype option[value='"+ $(this).val() +"']").text();
        $(this).next("span").text(selectedText);
    });     
});

查看此jsfiddle JSFIDDLE

Answer 4

希望这会对你有所帮助。

为span提供id，如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
  <input type="hidden" id="myhidden3" name="quantity" value="1" />
  <select id='usertype'>
        <option value='1'>Start Date</option>
        <option value='2'>End Date</option>
        <option value='3'>End Date</option>
      </select>
  <span id='span_text'>Start Date</span>
</form>

Jquery的：

$(function() {
  $('#usertype').change(function() {
    $('#span_text').val($('#usertype  option:selected').text());

  });
});

以jQuery形式出现.change函数问题

4 个答案: