时间戳

首页 > 解决方案 > 使用 javaschript 获取 HTML 表中下拉列表的值

javascript - 使用 javaschript 获取 HTML 表中下拉列表的值

问题描述

你好呀，

我想通过 JavaScript 将下拉列表的值存储在变量中。首先，我在 java Ajax 中使用 fetch 函数从控制器中获取数据，我在表格中逐个显示我的数据，并且表格的每一行都包含一个下拉列表。当我想更新数据时，只显示第一个下拉值。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 ";

}

爪哇代码

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

标签： javascriptphplaravel

解决方案

我已经添加了一个新的答案，其中我已经编写了我在之前的答案中所说的方法。最初，一旦您更改任何下拉列表的值，下拉列表的所有值都设置为 option1，其值会使用下拉列表的 id 在 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 中，其中键作为循环中的计数器值，并将值作为下拉选择值，例如：

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

并将 onchange 事件添加到您的所有下拉列表中，一旦您更改任何下拉列表的值，onchange 事件将被触发，并且您使用当前值更新 json。

推荐阅读