隠しデータリストオプションの値を設定する

Question

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

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

私が望むのは、input + datalistのアプローチは、 "Foo"と "Bar"がそれぞれ "1"と "2"の値を持つオプションとして表示される従来のselectのように振舞うことです。

また、値 "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>

Answer 1

だけしてみてください

<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; 
        } 
       } 
       } 

Answer 2

をしたネイティブな方法はありませんが、これはあなたを助ける知ってはいけません。 text inputs

input要素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ゲッターをハイジャックする必要があります。

Answer 3

datalistの正しい構文は次のとおりです。また、同じ名前の2つのオプションを持つ必要はありません。 JavaScriptをHTMLから取り除いたはずです。個々のオプションのID属性は、他の属性で置き換えることができます。あなたの価値を隠し作るためにdata-valueとjqueryを使用することができます

$(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>

Answer 4

。

例：@ guest271314へ

$(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

おかげ