web-dev-qa-db-ja.com

既存のハードコードされた値を提供するが、カスタム入力を受け取ることができる必要があるHTML選択ボックスのパターンはありますか？

以下のような参考情報のメニューがあります。

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

上記のフィールドは、システムによって段階的に事前入力されており、ユーザーは値を選択するだけです。具体的には、つまり、ユーザーが123のような参照注文を選択すると、その情報に基づいて、参照ジョブフィールドが入力されます。ユーザーが22などを選択すると、そのフィールドに基づいて、参照シリアルコンボボックスが表示されます。

これは、シリアル、ジョブ、または注文がまだシステムに入力されていない、または非常に古くてレガシーである（そしてシステムにない）場合を除いて、うまく機能しています。

これらの場合、ユーザーはすべてのボックスに独自の値を入力できる必要があります。

コンボボックス（私の場合はHTML selectボックス）がユーザー入力を取得できない場合、どうすればよいですか？

理想的には、同じ名前（HTMLの<name="ref_serial">）を手動入力に再利用する必要があります。

htmlcssjavascripthtml5select
2
Dennis

<datalist>タグを使用してしまいました。 <input>ボックスに必要なものを入力すると、入力時に定義済みの候補が表示されます。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

それは完璧ではありません（選択をポップアップさせるのに少し遅れがあると思うように、解決できる問題がいくつかあります）。ただし、ブラウザレベルで実装されており、適切に機能します。

0
Dennis

実装は問題ではないと述べた場合...

i-select 、 typeahead.js 、 Select2 のようなJavaScriptライブラリにはすべて、ユーザーが任意の値を入力できる設定があります。

1
Izhaki