How to display the text in datalist html5 and not

2019-01-11 13:22发布

站内问答 / jQuery
1830 2 4 

<!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/

I have attached a fiddle. Please check. The solution i want to achieve is when i click the dropdown the value is displayed, but i want the text 1,2,3,4,5 to be displayed. I have to use a json response for my actual problem.Only the text should be displayed and the value should be hidden like a general dropdown. This autocomplete feature is necessary else i would have gone with the normal dropdown.

2条回答
Ridiculous、
2楼-- · 2019-01-11 13:55

A quite messy method for doing this without dependencies like jQuery (edit: I realise that jQuery is being used by the OP, but this method will integrate fine with or without jQuery, so might helps others who are not).

First, swap your value and text nodes around, like 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">

This ensures that the input always shows the correct value for the user. Then add in some JavaScript to check the text node of the corresponding value, like 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 );
});

You can also change the 'change' event listener to 'keyup' too, to get real-time feedback. And instead of console.log('The value is:', _value ) you can simply add in an additional hidden input to store the value, thus allowing you to send both the value and id.

This uses modern JavaScript notation, but to make it backward compatible just need to change the 'change', () => { call to 'change', function() { and change let to var.

查看更多
0人赞 添加讨论(0) 举报
Viruses.
3楼-- · 2019-01-11 14:17

Edit, updated

Following Regent

Try (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/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)