カスタム値を入力するオプションを備えたHTML選択フォーム

104

ユーザーがカスタムテキスト値を入力したり、ドロップダウンから選択したりできる入力フィールドが欲しいのですが。レギュラー<select>はドロップダウンオプションのみを提供します。

どうすれば<select>カスタム値を受け入れることができますか？例：フォード？

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
html  forms 
— Ib33X
ソース
javascriptを使用してオプションを選択に動的に追加することもできますが、この情報を使用するのは非常に困難です。
— デビッド
私のウェブサイトfinnmglas.com/contactでカスタム値のオプションを追加しませんでしたが、誰かがカスタム値で私に連絡しました。それはとても奇妙です
— finnmglas

回答:

249

HTML5にはコンボボックスが組み込まれています。テキストinputとを作成しますdatalist。そして、あなたは追加listの属性をinputの値で、idのdatalist。

更新： 2019年3月の時点で、すべての主要なブラウザー（現在、Safari12.1およびiOSSafari 12.3を含む）datalistは、この機能に必要なレベルまでサポートしています。詳細なブラウザサポートについては、caniuseを参照してください。

次のようになります。

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>
スニペットを展開

— ドミトリー
ソース
3
この機能は、ブラウザの約50％でのみサポートされています。最新のFirefox、Chrome、Operaのみがこれをサポートしています。IE、Safari、モバイルブラウザはそうではありません。http://caniuse.com/を
— markmarijnissen 2014年
2
2016年の半ば（2年以上後）であり、ほとんどのブラウザは、少なくとも重大なバグがない限り、まだこれを完全にはサポートしていません。Safari / Safari iOSを除くほぼすべての最新バージョンで少なくとも何かが機能しますが、ユースケースが正しく機能することを確認するためにテストする必要があります。それはまだ最良の答えです。
— Michael Gaskill 2016年
1
それは私にとってうまくいきます。多くの場合、古いブラウザをサポートする必要はありません。入力フィールドの背景に「下矢印」画像を追加しただけで、ユーザーに拡張可能であるというヒントが与えられました。コード（実際の画像ファイルが必要です）：<input type="text" list="cars" style="background:url('images/arrow_down.png') no-repeat right center">
— Eugene Kardash 2016年
4
最近のバージョンのIE、Firefox、Chromeでテストしたところ、すべて正常に動作しています。これは、多くの場合、この一般的な問題に対する非常に簡単な解決策だと思います。
— kerl 2017年
3
本当に使いたかったのですが、デフォルト値を設定する必要がありました。ユーザーには、ドロップダウンにデフォルトとすべてのオプションのみが表示されます（フィルターで除外されているため）。すべてのオプションを表示する前に、入力フィールドをクリアすることを知っておく必要があります。
— ジャスティン
26

Alen Saqeの最新のJSFiddleはFirefoxで切り替えられなかったので、データリストタグがすべてのブラウザー/デバイスで受け入れられる日まで、フォーム内で（送信に関して）うまく機能する簡単なhtml / javascript回避策を提供すると思いました。詳細と実際の動作を確認するには、次のURLにアクセスしてください。http：//jsfiddle.net/6nq7w/4/ 注：トグルする兄弟の間にスペースを入れないでください。

<!DOCTYPE html>
<html>
<script>
function toggleField(hideObj,showObj){
  hideObj.disabled=true;        
  hideObj.style.display='none';
  showObj.disabled=false;   
  showObj.style.display='inline';
  showObj.focus();
}
</script>
<body>
<form name="BrowserSurvey" action="#">
Browser: <select name="browser" 
          onchange="if(this.options[this.selectedIndex].value=='customOption'){
              toggleField(this,this.nextSibling);
              this.selectedIndex='0';
          }">
            <option></option>
            <option value="customOption">[type a custom value]</option>
            <option>Chrome</option>
            <option>Firefox</option>
            <option>Internet Explorer</option>
            <option>Opera</option>
            <option>Safari</option>
        </select><input name="browser" style="display:none;" disabled="disabled" 
            onblur="if(this.value==''){toggleField(this,this.previousSibling);}">
<input type="submit" value="Submit">
</form>
</body>
</html>

— mickmackusa
ソース
あのフィドルをもう一度やりたい！Firefoxの魔女バージョンはそこでサポートされていませんでした！覚えていないバージョンでテストしました！称賛！
— Alen Saqe 2014年
FFのどのバージョンを使用していたのかわかりません。FF34.0を調べたところ、機能が追加されたので、心配はいりません。ただし、デフォルトの切り替えオプション「その他」はクリアできます。値を編​​集して「その他」を削除すると、ドロップメニューに直感的な値を選択できません（編集機能にアクセスするため）。これは個人的な好みによるものだと思います。フィールドが編集可能な場合でもドロップメニューの矢印が表示されるため、ユーザーはフィールドが編集可能であることに気付かない場合があります。あなたを掘り下げていない; いくつかのフィードバック。私のスニペットは、<form>内のフィールドの命名も考慮しています。
— mickmackusa 2014
この独創的だが判読できない（私にとって）script + htmlの最終結果は、選択したオプション値または入力したテキストをクエリ文字列と同じページのGETに添付することです。アクションをPOSTに変換する方法を知っている人はいますか？そのため、phpファイルの値を取得して、そこで何かを行うことができますか？
— ハン
このスクリプトは、htmlフォームの送信に従って動作するように特別な意図を持って作成しました。formタグの属性としてpostメソッドを使用していますか？@Han分離されたスニペットの3v4l.orgリンクを作成した場合は、簡単に調べてアドバイスすることができます。
— mickmackusa
1
少年は私が愚かだと感じますか。フォームタグにメソッドを入れるのを忘れました。<form name = "BrowserSurvey" method = "post" action = "/ gotThis.php"> ...美しいスクリプト、mickmackusa。フォローアップのヒントをありがとう！
— ハン
16

jQueryソリューション！

デモ：http：//jsfiddle.net/69wP6/2/

以下の別のデモ（更新！）

いくつかの固定オプションがあり、もう1つのオプションを編集可能にしたい場合に、同様の何かが必要でした。この場合、選択オプションと重複し、編集可能で、jQueryを使用してすべてをシームレスに機能させる非表示の入力を作成しました。

私はあなた方全員とフィドルを共有しています！

HTML

<div id="billdesc">
    <select id="test">
      <option class="non" value="option1">Option1</option>
      <option class="non" value="option2">Option2</option>
      <option class="editable" value="other">Other</option>
    </select>
    <input class="editOption" style="display:none;"></input>
</div>

CSS

body{
    background: blue;
}
#billdesc{
    padding-top: 50px;
}
#test{
    width: 100%;
    height: 30px;
}
option {
    height: 30px;
    line-height: 30px;
}

.editOption{
    width: 90%;
    height: 24px;
    position: relative;
    top: -30px

}

jQuery 

var initialText = $('.editable').val();
$('.editOption').val(initialText);

$('#test').change(function(){
var selected = $('option:selected', this).attr('class');
var optionText = $('.editable').text();

if(selected == "editable"){
  $('.editOption').show();


  $('.editOption').keyup(function(){
      var editText = $('.editOption').val();
      $('.editable').val(editText);
      $('.editable').html(editText);
  });

}else{
  $('.editOption').hide();
}
});

編集：人々が入力がどこで終わるかをはっきりと見ることができるように、デザイン的にいくつかの簡単なタッチを追加しました！

JSフィドル：http：//jsfiddle.net/69wP6/4/

— アレン・サケ
ソース
11

あなたは本当にできません。ドロップダウンとテキストボックスの両方を用意し、フォームを選択または入力する必要があります。javascriptがなければ、ドロップダウンまたはテキスト入力を選択する別のラジオボタンセットを作成できますが、これは私には厄介なようです。一部のJavaScriptでは、選択したものに応じてどちらか一方を無効に切り替えることができます。たとえば、ドロップダウンにテキストフィールドをトリガーする「その他」オプションがあります。

— サム
ソース
9

データリストオプションが要件を満たしていない場合は、Select2ライブラリと「動的オプションの作成」を確認してください。

$(".js-example-tags").select2({
  tags: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<select class="form-control js-example-tags">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>
スニペットを展開

— ソゲキング
ソース
0

上記のソリューションの1つ（@mickmackusa）を使用して、フックを使用してReact16.8 +で実用的なプロトタイプを作成しました。

https://codesandbox.io/s/heuristic-dewdney-0h2y2

私はそれが誰かを助けることを願っています。

— ダノ
ソース
私は光栄です。記録を確認したところ、StackOverflowで12回目の投稿になりました。100万年前のようです。
— mickmackusa
デモリンクを試してみましたが、2種類のフィールドを無期限に切り替える効果がなくなったようです。
— mickmackusa
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.