如何在附加按鈕單擊時獲取附加輸入 div 的值？

Question

我有這樣的簡單 HTML；

<div id="buildyourform">
<div class="row">
    <div class="col-sm-6">
        <div class="input-group mb-2">
        
        <select class="form-control" id="language">
        @foreach($language as $l)
            <option value="{{$l->id}}" >{{$l->name}}</option>
        @endforeach
        </select>
        </div>
    </div>
    
    <a href="javascript:void(0)" id="save-button" class="btn btn-light btn-sm ">
        <i class="fa fa-ban"></i>
        Upload
    </a>
   
    </div>
</div>
</div>

我有一個加號按鈕，我使用它在下面附加相同的字段。 現在我想通過單擊相應的上傳按鈕來檢索相應的選定語言 ID。 但每次它返回我第一個 select 字段的值。

這是我嘗試過的；

 $(document).on('click', '#save-button', function(){

    var obj=$(this);
    //language = obj.closest("div[class=row]").find("select[id=language]").val();
    language = $(this).parent().find("select[id=language]").val();
    console.log(language);

 });

誰能讓我知道如何在相應的按鈕單擊時獲取相應的選定語言 ID？

Answer 1

您需要使用 prev function 並通過 select#language 更改 select[id=xxxx]

https://api.jquery.com/prev/

 $(document).on('click', '#save-button', function(){ var obj=$(this); //language = obj.closest("div[class=row]").find("select[id=language]").val(); language = $(this).prev('.col-sm-6').find("select#language").val(); console.log(language); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="buildyourform"> <div class="row"> <div class="col-sm-6"> <div class="input-group mb-2"> <select class="form-control" id="language"> @foreach($language as $l) <option value="{{$l->id}}" >{{$l->name}}</option> @endforeach </select> </div> </div> <a href="javascript:void(0)" id="save-button" class="btn btn-light btn-sm "> <i class="fa fa-ban"></i> Upload </a> </div> </div>