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

标签 javascript html

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

<!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>

就像如果我选择一月,我希望我的标题具有一月的值

最佳答案

当用户从选择列表中进行选择时设置事件监听器。然后,您可以使用所选选项中的文本填充标题。通常,您只需使用所选项目的值即可,但您将这些设置为月份作为数字。因此,我不必将它们翻译为月份名称,而是使用选项文本:

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>

关于javascript - 使用选择框名称获取选择框中选项的标签值并将其设置为标题Javascript的新值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53527683/

相关文章:

javascript - Node.js/Express 异步文件上传

javascript - 查找具有特定数据属性的元素 jQuery

JavaScript : How can I add X elements to an array

javascript - 如何在 Next JS Application 中将 String 转换为 HTML 元素?

javascript - JavaScript 中的 64 位整数,来自 Mysql 请求

javascript - 用 Kendo 通知替换 javascript 警报

jquery - 为什么子菜单在悬停 Accordion 中消失

html - 在移动设备上打开 instagram 应用程序并在桌面上打开 url?

html - 如何在 CSS 中绘制形状?

javascript - 无法获取输入 ionic 3 的值