- <!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/
我附了一个小提琴.请检查.
我想要实现的解决方案是当我点击显示值的下拉列表,但是我想要显示文本1,2,3,4,5.我必须对我的实际问题使用一个json响应.只应该显示文本,并且应该像普通下拉列表那样隐藏该值.这个自动完成功能是必需的,否则我将会使用正常的下拉菜单.
解决方法
编辑,更新
以下摄政
尝试(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'));
- });
- });
