Node.jsでドロップダウンボックスのデフォルト値を設定する方法

Node.js は、Chrome V8 エンジンに基づく JavaScript ランタイム環境で、サーバーサイド プログラミングとコマンド ライン ツールの両方に使用できます。このテクノロジーは効率的かつ強力で、開発が容易であるため、開発者に広く歓迎されています。

Node.js では、フォーム データの処理は非常に一般的な操作であり、ドロップダウン ボックスは一般的なフォーム要素です。ドロップダウン ボックスは通常、複数のオプションを提供するために使用され、ユーザーはオプションの 1 つを選択して特定の機能を実現できます。場合によっては、ドロップダウン ボックスのデフォルト値を設定する必要があるので、Node.js でドロップダウン ボックスのデフォルト値を設定する方法を紹介します。

Node.js でフォーム データを処理するには、サードパーティ モジュール (body-parser) を使用する必要があります。

まず、ターミナルに body-parser モジュールをインストールします:

$ npm install body-parser

次に、コードにモジュールを導入します:

const express = require('express')
const bodyParser = require('body-parser')
const app = express()

次に、 body-parser モジュールの urlencoded メソッドは、フォーム データの解析を実行します。

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

フロントエンド ページで、ドロップダウン ボックスを定義する必要があります。 HTML コードを通じてデフォルト値を指定します。以下に示すように:

<select name="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange" selected>Orange</option>
</select>

選択ボックスで、デフォルトのオプションを selected 状態に設定します。

最後に、Node.js でフォーム データを処理するコールバック関数で、req.body を通じてフォーム データを取得し、ドロップダウン ボックスの値を取得します。フォームでオプションが選択されていない場合は、selected ステータスでそのオプションにデフォルト値を設定できます。以下に示すように:

app.post('/submit', (req, res) => {
  const { fruit } = req.body
  if (!fruit) {
    document.querySelector('select option[value=orange]').setAttribute('selected', true)
  }
  // ...
})

上記は、Node.js でドロップダウン ボックスのデフォルト値を設定する方法です。フロントエンド ページでは、デフォルト オプションに selected 属性を追加する必要があり、Node.js コールバック関数では、対応する判断を行ってデフォルト値を設定する必要があることに注意してください。 。このようにして、ドロップダウン ボックスのデフォルト値を柔軟に設定できるため、ユーザー エクスペリエンスがよりスムーズになります。

以上がNode.jsでドロップダウンボックスのデフォルト値を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。