Получает значение выпадающего списка в таблице HTML с javaschript

Question

Здравствуйте, дорогой,

Я бы хотел сохранить значение выпадающего списка в переменной JavaScript. Прежде всего, я выбираю данные из контроллера с функцией выборки в java Ajax, я показал свои данные в таблице как l oop, и каждая строка таблицы содержит раскрывающийся список. Когда я хочу обновить данные, отображается только первое раскрывающееся значение. проследить значение по console.log доказать это.

Как я могу получить значение каждого выпадающего списка?

выборка данных из БД с помощью Ajax. В editlink.blade. php

try {
    for(var count=0; count < data.length; count++)
    {
   html +='<tr >';
   html +='<td contenteditable class="column_name" data-column_name="link_name" data-id="'+data[count].id+'">'+data[count].name+'</td>';
        html += '<td contenteditable class="column_name" data-column_name="link_add" data-id="'+data[count].id+'">'+data[count].Address+'</td>';
        html += '<td contenteditable class="column_name" data-column_name="link_type"    data-id="'+data[count].id+'">' +
                    '<select id="opttypes"  value="'+data[count].id+'">' +
                        '<option id="opt1"'+ check_selected1(data[count].type)+' value="1"'+' >'+d1+'</option>' +
                        '<option id="opt2"'+  check_selected2(data[count].type)+' value="2"'+' >'+d2+'</option>' +
                        '<option id="opt3"'+  check_selected3(data[count].type)+' value="3"'+' >'+d3+'</option>' +
                        '<option id="opt4"'+ check_selected4(data[count].type)+' value="4"'+' >'+d4+'</option>' +
                    '</select>' +
               '</td>';
        html += '<td><button type="button" class="btn btn-danger btn-xs delete" id="'+data[count].id+'">Delete</button>' +
            '<button type="button" class="btn btn-success btn-xs edite" id="'+data[count].id+"_"+count+'">Update</button></td></tr>';
    }
    $('tbody').html(html);
}// end try
catch (e) {

    document.getElementById("demo").innerHTML = "error accrue in fetch form DB ";

}

java код

    $(document).on('click', '.edite', function(){
var allid=$(this).attr("id").split("_");// try to access id of data and number of row in HTML table
    var id2=allid[0];// fetch ID of data in DB
    var countRow=Number(allid[1])+2;// calculate detected row that user clicked.
    var link_name = document.getElementById("html_table").rows[countRow].cells.item(0);// gets links name
    var link_add =document.getElementById("html_table").rows[countRow].cells.item(1);// gets link address
        var link_type=$("#opttypes :selected").val();// gets which option user clicked.    })

Answer 1

Я добавил новый ответ, где я написал подход, который я сказал в предыдущем. Здесь изначально все значения раскрывающихся списков устанавливаются на option1, как только вы изменяете значение любого раскрывающегося списка, его значения изменяются в массиве json с использованием идентификатора раскрывающегося списка. Вы можете вносить изменения в соответствии со своим сценарием.

let table = document.querySelector("#table")
console.log(table)
var selectedOptions = {}

for (i = 0; i < 5; i++) {

    let tr = document.createElement("tr");

    let name = document.createElement("td");
    name.innerText = "name" + i;
    let address = document.createElement("td");
    address.innerText = "address" + i;
    let dropdown = document.createElement("td");

    let select = document.createElement("select");
    select.setAttribute("id", i);
    select.addEventListener("change",updatevalues)



    let option1 = document.createElement("option");
    option1.innerText = "option1"
    select.appendChild(option1)
    selectedOptions[i] = option1.innerText;


    option1 = document.createElement("option");
    option1.innerText = "option2"
    select.appendChild(option1)

    option1 = document.createElement("option");
    option1.innerText = "option3"
    select.appendChild(option1)

    option1 = document.createElement("option");
    option1.innerText = "option4"


    select.appendChild(option1)


    dropdown.appendChild(select)
 

    



    tr.appendChild(name);
    tr.appendChild(address);
    tr.appendChild(dropdown)

    table.appendChild(tr);

}
console.log(selectedOptions)   
var selectedOptions = {
    0: "option1",
    1: "option1",
    2: "option1",
    3: "option1",
    4: "option1"
}

function updatevalues(event) {
    console.log(event.target.id)
    console.log(event.target.options[event.target.options.selectedIndex].text)
    selectedOptions[event.target.id] = event.target.options[event.target.options.selectedIndex].text;
    console.log(selectedOptions)
}

<div>


        <table id="table"></table>

    </div>

вы можете попробовать этот подход, однако есть несколько способов.

Сохраните ваши начальные выбранные значения всех ваших выпадающих в json с ключами в качестве значения счетчика, которое у вас есть в l oop, и в качестве значения, выбранного в раскрывающемся списке, например:

 {
    0:"value1",
    1:"value2",
    2:"value1",
    4:"value3"
 }

И добавьте событие onchange во все раскрывающиеся списки, как только вы измените значение любого раскрывающегося списка onchange событие сработает, и вы обновите json текущим значением.