Question

嗨，我是javascript新手，我正在尝试通过使用selectbox名称而不是其id获取select框标签的值，然后将获取的值设置为新标题，但是下面的代码没有给出我想要的输出选择1月时更改了标题01，因为我获得了价值，我希望它是1月。非常感谢您的任何建议

<!DOCTYPE html>
<html>
<body> 
    <h3 id = "p2">I will change this part</h3>

    <script>
        var x = document.getElementsByName("start_month")[0].value;
        document.getElementById("p2").innerHTML = x
    </script>

</body>
</html>

我的选择框是

 <select id="month3781857" name="start_month"    >
     <option value="01" grouping=""  >January</option>
     <option value="02" grouping=""  >February</option>
     <option value="03" grouping=""  >March</option>
     <option value="04" grouping=""  >April</option>
     <option value="05" grouping=""  >May</option>
     <option value="06" grouping=""  >June</option>
     <option value="07" grouping=""  >July</option>
     <option value="08" grouping=""  >August</option>
     <option value="09" grouping=""  >September</option>
     <option value="10" grouping=""  >October</option>
     <option value="11" grouping=""  >November</option>
     <option value="12" grouping=""  >December</option>
</select>

就像如果我选择“一月”，我希望标题包含一月的值

Answer 1

我认为您正在寻找使用selectedIndex获取所选项目的text属性，并通过id将其设置为<h3>的innerHTML的方法。

var x = document.getElementsByName("start_month")[0];
document.getElementById("p2").innerHTML = x.options[x.selectedIndex].text;

如果要在更改选择内容时对其进行更新，则可以创建用于onchange的函数或附加事件处理程序：

function updateValue() {
  var x = document.getElementsByName("start_month")[0];
  document.getElementById("p2").innerHTML = x.options[x.selectedIndex].text;
}

<h3 id="p2">I will change this part</h3>
<select id="month3781857" name="start_month" onchange="updateValue()">
  <option value="01" grouping="">January</option>
  <option value="02" grouping="">February</option>
  <option value="03" grouping="">March</option>
  <option value="04" grouping="">April</option>
  <option value="05" grouping="">May</option>
  <option value="06" grouping="">June</option>
  <option value="07" grouping="">July</option>
  <option value="08" grouping="">August</option>
  <option value="09" grouping="">September</option>
  <option value="10" grouping="">October</option>
  <option value="11" grouping="">November</option>
  <option value="12" grouping="">December</option>
</select>

Answer 2

您可以使用Javascript或jQuery动态更改h3或任何dom元素的内容。我看到已经提供了Javascript解决方案，所以这是我的jQuery解决方案。

$('#month3781857').change(function () {
    var str = "";
    $('select option:selected').each(function() {
      str += $( this ).text() + " ";
    });
    $('#p2').text(str);
  }).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="month3781857" name="start_month">
	<option value="01" grouping=""  >January</option>
	<option value="02" grouping=""  >February</option>
	<option value="03" grouping=""  >March</option>
	<option value="04" grouping=""  >April</option>
	<option value="05" grouping=""  >May</option>
	<option value="06" grouping=""  >June</option>
	<option value="07" grouping=""  >July</option>
	<option value="08" grouping=""  >August</option>
	<option value="09" grouping=""  >September</option>
	<option value="10" grouping=""  >October</option>
	<option value="11" grouping=""  >November</option>
	<option value="12" grouping=""  >December</option>
</select>

<h3 id="p2">I will change this part</h3>

Answer 3

设置一个事件侦听器，以了解用户何时从选择列表中进行选择。然后，可以使用所选选项中的文本填充标题。通常，您只需为此使用选择项的值，但是将这些值设置为月作为数字。因此，我不必将其转换为月份名称，而是使用了选项文本：

var x = document.getElementsByName("start_month")[0];

function start() {
  x.addEventListener("change", function() {
    document.getElementById("p2").innerHTML = x.options[x.selectedIndex].text;
  });
}

window.load = start();

<h3 id="p2">I will change this part</h3>
<select id="month3781857" name="start_month">
  <option value="" grouping=""></option>
  <option value="01" grouping="">January</option>
  <option value="02" grouping="">February</option>
  <option value="03" grouping="">March</option>
  <option value="04" grouping="">April</option>
  <option value="05" grouping="">May</option>
  <option value="06" grouping="">June</option>
  <option value="07" grouping="">July</option>
  <option value="08" grouping="">August</option>
  <option value="09" grouping="">September</option>
  <option value="10" grouping="">October</option>
  <option value="11" grouping="">November</option>
  <option value="12" grouping="">December</option>
</select>

Answer 4

使用

<input type="date" />

或者看这个https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607171-les-formulaires。它是法语，但可以为您提供帮助

date：日期（例如，1985年5月8日）时间：时间（例如13:37）周：一周月：本月 datetime：日期和时间自动带有时差的datetime-local date ans小时

使用选择框名称在选择框中获取选项的标签值，并将其设置为标题Javascript的新值

4 个答案: