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>

Aditya Bhave · Accepted Answer · 2020-01-23 12:27:44Z

2

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>

answered Jan 23, 2020 at 12:27

Aditya Bhave

1,0281 gold badge6 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pranav C Balan · Accepted Answer · 2020-01-24 05:57:08Z

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.

Guruprasad J Rao · Accepted Answer · 2020-01-23 10:48:59Z

0

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

answered Jan 23, 2020 at 10:48

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Comments

Burak Ayyildiz · Accepted Answer · 2020-01-23 10:54:23Z

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, 2020 at 10:54

Burak Ayyildiz

4652 silver badges7 bronze badges

Collectives™ on Stack Overflow

how to get selected attribute value in datalist using jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related