Wie, um den text anzuzeigen, der in der datalist html5 und nicht Wert

<!DOCTYPE html>
<html>
<body>

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">1</option>
  <option value="Firefox">2</option>
  <option value="Chrome">3</option>
  <option value="Opera">4</option>
  <option value="Safari">5</option>
</datalist>
<input type="submit">
</form>

</body>
</html>

http://jsfiddle.net/j7ehtqjd/1/

Habe ich schonmal ein Turnschuh. Überprüfen Sie bitte.
Die Lösung, die ich erreichen möchte ist, wenn ich auf das dropdown der Wert angezeigt wird, aber ich will den text 1,2,3,4,5 angezeigt werden. Ich habe die Verwendung einer json-Antwort für meine eigentliche problem.Nur der text angezeigt werden soll und der Wert ausgeblendet werden soll, wie ein general der dropdown-Liste. Diese AutoVervollständigen-Funktion ist notwendig, sonst würde ich gegangen mit dem normalen dropdown.

InformationsquelleAutor der Frage Cerebus1504 | 2014-09-02

  1. 19

    Bearbeiten, aktualisiert

    Folgende Regent

    Versuchen (v3)

    html

    <input id="selected" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="InternetExplorer" value="1"></option>
    <option data-value="Firefox" value="2"></option>
    <option data-value="Chrome" value="3"></option>
    <option data-value="Opera" value="4"></option>
    <option data-value="Safari" value="5"></option>
</datalist>
<input id="submit" type="submit">

    js

    $(document).ready(function() {

var data = {}; 
$("#browsers option").each(function(i,el) {  
   data[$(el).data("value")] = $(el).val();
});
//`data` : object of `data-value` : `value`
console.log(data, $("#browsers option").val());


    $('#submit').click(function()
    {
        var value = $('#selected').val();
        alert($('#browsers [value="' + value + '"]').data('value'));
    });
});

    jsfiddle http://jsfiddle.net/guest271314/j7ehtqjd/13/

    InformationsquelleAutor der Antwort guest271314

  2. 0

    Einer ziemlich chaotisch Methode, dies zu tun, ohne Abhängigkeiten wie jQuery (edit: ich merke gerade, dass jQuery verwendet wird, die durch die OP, aber diese Methode integrieren wird gut mit oder ohne jQuery, also vielleicht hilft das auch anderen, die nicht).

    Zuerst tauschen Sie Ihre Wert-und text-Knoten um, etwa so:

    <input list="browsers" name="browser" id="my_input">
  <datalist id="browsers">
    <option value="Internet Explorer">1</option>
    <option value="Firefox">2</option>
    <option value="Chrome">3</option>
    <option value="Opera">4</option>
    <option value="Safari">5</option>
  </datalist>
  <input type="submit">

    Dadurch wird sichergestellt, dass der Eingang zeigt immer den richtigen Wert für den Benutzer. Dann fügen Sie in einige JavaScript zu überprüfen, die text-Knoten der entsprechende Wert, etwa so:

    let $input = document.getElementById('my_input');
let $datalist = document.getElementById('browsers');

$input.addEventListener('change', () => {
  let _value = null;

  let input_value = $input.value;
  let options = $datalist.children;
  let i = options.length;

  while(i--) {
    let option = options[i];

    if(option.value == input_value) {
      _value = option.textContent;
      break;
    }
  }

  if(_value == null) {
    console.warn('Value does not exist');
    return false;
  }

  console.log('The value is:', _value );
});

    Können Sie auch die 'change' Ereignis-listener, um 'keyup' zu erhalten Echtzeit-feedback. Und statt console.log('The value is:', _value ) Sie können fügen Sie einfach eine zusätzliche hidden Eingang um den Wert zu speichern, so dass Sie zum senden den Wert und die id.

    Dieser benutzt moderne JavaScript-notation, aber um es abwärtskompatibel brauchen nur zu ändern die 'change', () => { Aufruf 'change', function() { und ändern let zu var.

    InformationsquelleAutor der Antwort Oliver

Schreibe einen Kommentar