数据列表获取选定值和自定义属性（无事件）

Question

我有一个带有选项和自定义属性的数据列表。

<input list="selectedItems" class="selectedItemsList"></input>
                                <datalist id="selectedItems">
                                    <option value="test11" oldvalue="f1"></option>
                                    <option value="test12" oldvalue="f2"></option>
                                </datalist>

它显示在弹出窗口中。当弹出窗口关闭值时，必须在函数中使用自定义属性值...

我试过了：

alert($("#selectedItems option:selected").val());

alert($("#selectedItems option:selected").attr("oldvalue"));

$('.selectedItemsList option').each(function() {
    if($(this).is(':selected')){
     alert($(this).val());
   }
});

for (var i=0; i<document.getElementById('selectedItemsList').options.length; i++)
                { 
                    if (document.getElementById('selectedItemsList').options[i].value ==  document.getElementsByName("selectedItems")[0].value) 
                    { 
                      alert(document.getElementById('selectedItemsList').options[i].value);
                      break;
                    }                                                
               }

没有任何效果。

我可以使用 on-event 获取值，但这对我来说不是一个选项。

$('.selectedItemsList').on('input', function() { ...  
alert($(this).val());

Answer 1

基本上，我认为问题与您的选择器使用有关。我假设您正在尝试从数据列表中获取旧值。关闭弹出窗口时，您应该先获取输入的值

var inputval= $(".selectedItemsList").val();
alert(inputval);

然后根据输入的值获取关联的旧值。

var oldval= $('datalist#selectedDevices option[value='+inputval+']').attr('oldvalue');
if (oldval)
    alert(oldval);

我在这里创建了一个 jsfiddle 给你玩。
http://jsfiddle.net/jornjjt6/

Answer 2

$(function(){$("input[name=selectedItems]").on('input', function(){// selects which array raw is edited
            for (var i=0; i<dList.length; i++) if(dList[i].ItemName===$(this).val()) { num = i;
            $(".selectedItems option[value="+dList[num].ItemName+"]").val($(this).val());
            dList[num].ItemName=$(this).val();
        });
    });

因此，我使用datalist oninput 事件来获取选定的值。然后，我编辑代表数据列表值的值数组的原始数据。

var dList=[];num=0;
dList.push({ItemName: $(this).attr('value'), ViV: vs[0], NU: vs[1], ItemKey: $(this).attr('key')});

数据列表获取选定值和自定义属性（无事件）

datalist get selected value and custom attribute (without events)

html

javascript

css

jquery

html-datalist