как получить выбранное значение атрибута в списке данных, используя jQuery - PullRequest
Новая
       52

как получить выбранное значение атрибута в списке данных, используя jQuery

3 голосов
/ 23 января 2020 

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

Ответы [ 4 ]

2 голосов
/ 23 января 2020

Не уверен, есть ли более простое решение, чем это. Попробуйте ниже. 

$("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>
2 голосов
/ 23 января 2020

Вы можете использовать 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>

FYI: Для получения значения data-* используйте jQuery data() метод.

0 голосов
/ 23 января 2020

Есть еще один способ сделать это, реагируя на событие изменения входного значения: 

$(function(){
    $('#s').change(function(){
        console.log($("#TypeList option[value='" + $('#s').val() + "']").attr('id'));
    });
});
0 голосов
/ 23 января 2020

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