如何使用jQuery在datalist中獲取選定的屬性值

Question

 $("input[name=TypeList]").focusout(function(){ alert($(this).attr('data-value')); });

 <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="s" name = "TypeList" list = "TypeList" placeholder = "Select Type"/> <datalist id = "TypeList"> <option data="1" data-value="1">Internet Explore1</option> <option data-value="4">Internet Explore4</option> <option data-value="3">Internet Explore3</option> <option data-value="2">Internet Explore2</option> </datalist> </body>

Answer 1

您可以使用jQuery :contains()偽類選擇器根據內容進行選擇。

 $("input[name=TypeList]").focusout(function(){ alert($(`#TypeList option:contains('${this.value}')`).data('value')); });

 <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="s" name = "TypeList" list = "TypeList" placeholder = "Select Type"/> <datalist id = "TypeList"> <option data="1" data-value="1">Internet Explore1</option> <option data-value="4">Internet Explore4</option> <option data-value="3">Internet Explore3</option> <option data-value="2">Internet Explore2</option> </datalist> </body>

對於精確匹配，您必須使用filter()方法。

 $("input[name=TypeList]").focusout(function() { var val = this.value; alert($('#TypeList option').filter(function() { return val === this.value; }).data('value')); });

 <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="s" name="TypeList" list="TypeList" placeholder="Select Type" /> <datalist id="TypeList"> <option data="1" data-value="1">Internet Explore1</option> <option data-value="4">Internet Explore4</option> <option data-value="3">Internet Explore3</option> <option data-value="2">Internet Explore2</option> </datalist> </body>

僅供參考：要獲取data-*值，請使用 jQuery data()方法。

Answer 2

不確定是否有比這更簡單的解決方案。 下面試試。

 $("input[name=TypeList]").focusout(function(){ console.log($([].slice.call($(this)[0].list.children).filter((e) => { return e.value === $(this).val(); })).attr('data-value')); });

 <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="s" name = "TypeList" list = "TypeList" placeholder = "Select Type"/> <datalist id = "TypeList"> <option data="1" data-value="1">Internet Explore1</option> <option data-value="4">Internet Explore4</option> <option data-value="3">Internet Explore3</option> <option data-value="2">Internet Explore2</option> </datalist> </body>

Answer 3

$(this).val()應該為你做這項工作.. :)

 $("input[name=TypeList]").focusout(function(){ alert($(this).val()); });

 <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="s" name = "TypeList" list = "TypeList" placeholder = "Select Type"/> <datalist id = "TypeList"> <option data="1" data-value="1">Internet Explore1</option> <option data-value="4">Internet Explore4</option> <option data-value="3">Internet Explore3</option> <option data-value="2">Internet Explore2</option> </datalist> </body>

Answer 4

還有另一種方法可以通過對輸入值的更改事件做出反應來做到這一點：

$(function(){
    $('#s').change(function(){
        console.log($("#TypeList option[value='" + $('#s').val() + "']").attr('id'));
    });
});

如何使用jQuery在datalist中獲取選定的屬性值

問題描述

4 個解決方案

解決方案1
2 2020-01-23 10:50:09

解決方案2
2 已采納 2020-01-23 12:27:44

解決方案3
0 2020-01-23 10:48:59

解決方案4
0 2020-01-23 10:54:23

如何使用jQuery在datalist中獲取選定的屬性值

問題描述

4 個解決方案

解決方案1 2 2020-01-23 10:50:09

解決方案2 2 已采納 2020-01-23 12:27:44

解決方案3 0 2020-01-23 10:48:59

解決方案4 0 2020-01-23 10:54:23

解決方案1
2 2020-01-23 10:50:09

解決方案2
2 已采納 2020-01-23 12:27:44

解決方案3
0 2020-01-23 10:48:59

解決方案4
0 2020-01-23 10:54:23