客户端

Question

我是Node.js和Express的新手

我正在尝试从HTML页面的选择列表中获取选择的选项，并使用node.js作为响应显示

HTML

<form name="survey" id="survey" method="post" action="/survey">
    <select name="monthofbirth">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
</form>

Index.JS

var express = require('express')
var bodyParser = require("body-parser");
var app = express()

app.use(express.static('public'))

app.use(bodyParser.urlencoded({ extended: false }));

app.post('/survey', function (req, res) {
    let month = req.body.monthofbirth;
});

app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
})

当我尝试使用代码res.write（<b>${month}</b>）打印响应时；它显示选项的值，例如1、2、3等，但我必须显示文本，例如一月，二月等。

请帮我解决这个问题：（

编辑：

我不应该更改HTML文档，因此无法将选项值从1、2、3更改为1月，2月等；

Answer 1

客户端

使用querySelector获取值的option元素，然后获取其innerText。

document.getElementById('submit').onclick = () => {
  const select = document.querySelector("select[name='monthofbirth']")
  const value = select.value;
  const option = select.querySelector(`option[value='${value}']`)
  const text = option.innerText
  console.log(text)
}

<form name="survey" id="survey" onSubmit='return false'>
  <select name="monthofbirth">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
  </select>

  <button id='submit'>Submit</button>
</form>

服务器端

使用字符串或数字作为键来创建地图或对象。

const monthNames = {
  '1': 'January',
  '2':'February',
   // etc
}

res.write(`<b>${monthNames[month]}</b>`);

第三方图书馆

您还可以使用第三方库来获取名称，还可以获取特定于语言环境的名称。

https://momentjs.com/

https://github.com/moment/moment/issues/2433

Answer 2

这很正常，因为附加到每个选项的值是数字（1,2,3,4，... 12），如果要获取月份名称，则必须更改选择这样的选项

<select name="monthofbirth">
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
</select>

Answer 3

最简单的方法是简单地使值代表您要使用的月份。您是否有理由将值作为月份号而不是名称？

如何使用Node.js显示选择选项的值作为响应

3 个答案:

客户端

服务器端

第三方图书馆