Einstellen der Werte für versteckte Datenlistenoptionen

Question

Im folgenden Abschnitt habe ich zwei Methoden zur Auswahl eines Elements: Eingabe mit Datenliste und traditionelle Auswahl mit Optionen.

Das select-Element hält die Optionswerte verborgen, und wir können es immer noch mit this.value erhalten. Mit dem Datenlistenprogramm wird der Wert jedoch tatsächlich angezeigt und der Textinhalt der Option wird als sekundäres Etikett angezeigt.

Was ich möchte, ist die Eingabe + datalist Ansatz verhalten sich wie eine traditionelle Auswahl, wo "Foo" und "Bar" als Optionen angezeigt werden, die bei Auswahl die Werte von "1" und "2" haben.

Ich habe auch einen wiederholten Namen "Foo" mit dem Wert "3" hinzugefügt. Dies soll zeigen, dass keine Lösung von eindeutigen Optionen abhängig sein darf.

<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

Sie wissen nicht, das wird Ihnen helfen, nur ein

<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

versuchen gemacht Es gibt keine native Möglichkeit. Für text inputs

Die input Element represents eine eine Zeile Klartext bearbeitet Steuerung für das Element des value.

So ist es nicht möglich, eine Texteingabe anzuzeigen, Text anders als seinen Wert anzuzeigen.

Sie könnten die value Getter in HTMLInputElement.prototype hijack, aber ich empfehle es nicht, und ich sehe keine Möglichkeit zu wissen, welche Option gewählt wurde, wenn die Werte nicht eindeutig sind.

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>

Oder vielleicht können Sie die Eingabe lassen zeigen den Wert der Option anstelle des Textes, sondern ersetzen Sie es sofort:

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>

In Das zweite Beispiel, oninput="console.log(this.value)", zeigt den Wert der Option, weil th Code wird ausgeführt, bevor der Wert zum Textinhalt ersetzt wird. Wenn Sie später .value accessions wollen, um den Optionswert zurückzugeben, müssen Sie den value Getter wie im ersten Beispiel entführen.

Answer 3

Die korrekte Syntax von Dataist ist wie folgt. Es hat auch keinen Sinn, zwei Optionen mit demselben Namen zu haben. Ich habe JavaScript aus dem HTML genommen, wie es sein sollte. Das ID-Attribut der einzelnen Optionen kann durch ein anderes Attribut ersetzt werden.

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

können Sie data-value und jquery verwenden Sie den Wert versteckt zu machen.

zB:

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

Dank @ guest271314