Как получить из входного списка данных выбранный идентификатор

Question

Здравствуйте, у меня есть один datalist и некоторые входные данные со списком. я не могу получить выбранный идентификатор ввода

Я пытаюсь сделать это, но это не работает

$(".updateResolutions").click(function () {
      let regDate = $(this).closest('div').find('#regDate').val();                  
      var opt = $('.Organizations option[value="' + $(this).val() + '"]');
      console.log(opt.attr('id'));
            console.log(opt);        
            );
        });

это HTML

<datalist id="OrganizationsList">   
    <option id="1" value="Name1" />
    <option id="2" value="Name2" />      
</datalist>

<div class="col-md-11 borderDiv"> 
        <input type="date" name="regdate" id="regDate" />
        <label for="regdate"> Организация : </label>
        <input type="text" list="OrganizationsList" name="resOrg" class="resOrgId Organizations" value="@item.OrgName" style="width:30em" />
        <button type="button" id="updateResolutions" class="btn btn-default updateResolutions">изменить</button>
</div>

<div class="col-md-11 borderDiv"> 
        <input type="date" name="regdate" id="regDate" />
        <label for="regdate"> Организация : </label>
        <input type="text" list="OrganizationsList" name="resOrg" class="resOrgId Organizations" value="@item.OrgName" style="width:30em" />
        <button type="button" id="updateResolutions" class="btn btn-default updateResolutions">изменить</button>
</div>

div может быть больше, чем2 (3-10)

Answer 1

Вы можете получить выбранную опцию по ее значению: $('#OrganizationsList option[value="' + $(this).siblings('input[name=resOrg]').val() + '"]').

$(function(){
    $(".updateResolutions").click(function (e) {                  
        var opt = $('#OrganizationsList option[value="' + $(this).siblings('input[name=resOrg]').val() + '"]').attr('id');
        console.log(opt);
    });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<datalist id="OrganizationsList">
    <option id="1" value="Name1" />
    <option id="2" value="Name2" />
</datalist>

<div class="col-md-11 borderDiv">
    <label for="regdate1"> Организация : </label>
    <input type="text" list="OrganizationsList" name="resOrg" id="" value="Name1" style="width:30em" />
    <button type="button" id="regdate1" class="btn btn-default updateResolutions">изменить</button>
</div>

<div class="col-md-11 borderDiv"> 
    <label for="regdate2"> Организация : </label>
    <input type="text" list="OrganizationsList" name="resOrg" id="" value="Name2" style="width:30em" />
    <button type="button" id="regdate2" class="btn btn-default updateResolutions">изменить</button>
</div>

Кроме того, значение id должно быть уникальным для ваших кнопок и других входов.

Answer 2

у вас есть несколько ошибок в вашем коде

идентификатор должен быть уникальным, так как я вижу, что код resOrgId используется дважды

у вас есть дополнительный);на JS

приведенный ниже код должен работать нормально

$('.updateResolutions').click(function(){
let regDate = $(this).closest('div').find('#regDate').val();
alert(regDate)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<datalist id="OrganizationsList">   
    <option id="1" value="Name1" />
    <option id="2" value="Name2" />      
</datalist>

<div class="col-md-11 borderDiv"> 
        <input type="date" name="regdate" id="regDate" />
        <label for="regdate"> Организация : </label>
        <input type="text" list="OrganizationsList" name="resOrg" id="resOrgId" value="@item.OrgName" style="width:30em" />
        <button type="button" id="updateResolutions" class="btn btn-default updateResolutions">изменить</button>
</div>

<div class="col-md-11 borderDiv"> 
        <input type="date" name="regdate" id="regDate" />
        <label for="regdate"> Организация : </label>
        <input type="text" list="OrganizationsList" name="resOrg" id="resOrgId" value="@item.OrgName" style="width:30em" />
        <button type="button" id="updateResolutions" class="btn btn-default updateResolutions">изменить</button>
</div>