how to get selected attribute value in datalist using jQuery

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>

Pranav C Balan · Answer 1 · 2020-01-24T05:57:08.493

You can use jQuery :contains() pseudo-class selector to select based on content.

$("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>

For an exact match, you have to use the filter() method.

$("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>

FYI : For getting data-* value use jQuery data() method.

score 2 · Accepted Answer · answered Jan 23 '20 at 12:27

Not sure if there is any easier solution than this. Try below.

$("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>

score 0 · Answer 3 · answered Jan 23 '20 at 10:48

$(this).val() should do the job for you.. :)

$("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>

score 0 · Answer 4 · answered Jan 23 '20 at 10:54

0

There is another way to do this by reacting on the change event of the input value:

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

answered Jan 23 '20 at 10:54

Burak Ayyildiz

325
1
6

how to get selected attribute value in datalist using jQuery

4 Answers4