web-dev-qa-db-ja.com

非表示のデータリストオプション値の設定

以下のスニペットでは、アイテムを選択する2つの方法があります。データリストを使用した入力と、オプションを使用した従来の選択です。

Select要素はオプション値を非表示のままにしますが、this.valueを使用してそれを取得できます。ただし、データリストでは、値が実際に表示され、オプションのテキストコンテンツがセカンダリラベルとして表示されます。

私が望んでいるのは、input + datalistアプローチが従来の選択のように動作することです。「Foo」と「Bar」は、選択時にそれぞれ「1」と「2」の値を持つオプションとして表示されます。

また、値「3」の繰り返し名「Foo」を追加しました。これは、ソリューションが一意のオプションに依存してはならないことを示すためです。

<input list="options" onchange="console.log(this.value)"/>
<datalist id="options">
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

<select onchange="console.log(this.value)">
  <option value=""></option>
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</select>
htmlhtml5html-selecthtml-datalist
11
Rick Viscomi

ネイティブな方法はありません。 テキスト入力 の場合

input element represents 要素の value の1行のプレーンテキスト編集コントロール。

そのため、テキスト入力にその値とは異なるテキストを表示させることはできません。

_HTMLInputElement.prototype_でvalueゲッターをハイジャックすることはできますが、お勧めしません。値が一意でない場合、どのオプションが選択されたかを知る方法がわかりません。

_var des = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(HTMLInputElement.prototype, 'value', { get: function() {
  if(this.type === 'text' && this.list) {
    var value = des.get.call(this);
    var opt = [].find.call(this.list.options, function(option) {
      return option.value === value;
    });
    return opt ? opt.dataset.value : value;
  }
}});_
_<input list="options" oninput="console.log(this.value);" />
<datalist id="options">
  <option data-value="1">Foo</option>
  <option data-value="2">Bar</option>
  <option data-value="3">Foo</option>
</datalist>_

または、テキストではなくオプションの値を入力に表示させて、すぐに置き換えることもできます。

_var inp = document.querySelector('input');
inp.addEventListener('input', function() {
  var value = this.value;
  var opt = [].find.call(this.list.options, function(option) {
    return option.value === value;
  });
  if(opt) {
    this.value = opt.textContent;
  }
});_
_<input list="options" oninput="console.log(this.value);" />
<datalist id="options">
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>_

2番目の例では、oninput="console.log(this.value)"はオプションの値を示します。これは、コードが値をテキストコンテンツに置き換える前に実行されるためです。後で_.value_アクセッションがオプション値を返すようにするには、最初の例のようにvalueゲッターをハイジャックする必要があります。

2
Oriol

data-valueとjqueryを使用して、値を非表示にすることができます。

例えば：

$(document).ready(function() {

    $('#submit').click(function()
    {
        var value = $('#selected').val();
        alert($('#browsers [value="' + value + '"]').data('value'));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="selected" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="1" value="InternetExplorer"></option>
    <option data-value="2" value="Firefox"></option>
    <option data-value="3" value="Chrome"></option>

</datalist>
<input id="submit" type="submit">

jsfiddle

@ guest271314に感謝

1
HybrisHelp

だから私が取り組んでいるコードベースには、動的なフォームを書くためのプログラマティックfieldWriterがあります。多数の選択をオートコンプリートデータリストに変換するように求められました。このためにしたことは、3つの要素をセットアップすることです。

  • 「somefield_dl」という名前の1つのデータリスト
  • 「somefield_proxy」という名前の表示可能な入力
  • 「somefield」という名前の1つの隠された入力

データリストで、<option data-value="439" value="Readable Text"></option>のような各オプションを設定します

イベントハンドラを使用すると、「somefield_proxy」が変更されるたびに、「somefield」が、値が一致する「somefield_dl」からオプションのデータ値に変更されます。

これらを使用するためのコード上の主な違いは、フィールドの値を更新するたびに、非表示の入力でクリックイベントをトリガーしてプロキシ入力を更新する必要があることです。また、データを収集する場合、名前が_proxyで終わる要素を除外する必要があります。

0
RoboticRenaissance

データリストの正しい構文は次のようなものです。また、同じ名前の2つのオプションを指定しても意味がありません。 JavaScriptをあるべきHTMLから取り出しました。個々のオプションのID属性は、他の属性に置き換えることができます。

$(function() {
  $('input[name=chooseOption]').on('input',function() {
    var selectedOption = $('option[value="'+$(this).val()+'"]');
    console.log(selectedOption.length ? selectedOption.attr('id') : 'This opiton is not in the list!');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="options" name="chooseOption">
<datalist id="options">
  <option id="1" value="Foo">
  <option id="2" value="Bar">
  <option id="3" value="Foo">
</datalist>
0
Stoycho Trenchev

これがあなたを助けるだろうか分からない、ちょうど試してみた

  <input list="options" id="opt" oninput="onInput()">
  <datalist id="options">
        <option value="1">Foo</option>
       <option value="2">Bar</option>
       <option value="3">Foo</option> 
        <option value="4">Foo</option>
       <option value="5">Bar</option>
       <option value="6">Foo</option> 
  </datalist>




 $( document ).ready(function() {              
         var x =  document.getElementById("options");
           for (i = 0; i < x.length; i++)
            alert(x.options[i].value);     


            $("#opt").click(function(){
                 $("#opt").val("");});                   
             });

     function onInput() {
            var val = document.getElementById("opt").value;
            var opts = document.getElementById('options').childNodes;
             for (var i = 0; i < opts.length; i++) {
                    if (opts[i].value === val) {                
                    document.getElementById("opt").value = opts[i].value + "   "+ opts[i].innerHTML;
                    break;
                  }
                }
              }
0
Sun_Sparxz