CODEWITHSUNDEEP
javascriptphplaravel
Jamal Azizbeigi
Jamal Azizbeigi

Reputation: 303

Gets Value of Dropdown list in HTML table with javaschript

Hello Dear,

I would like store value of Dropdown list in variable by JavaScript. First of all, I fetch data from controller with fetch function in java Ajax, I showed my data in table by loop and each row of table contain a dropdown list. When I want update data only first dropdown value showed. trace value by console.log prove that.

How Can I fetch value of each dropdown list?

fetching data from DB with Ajax. In 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 code

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

Upvotes: 1

Views: 571

Answers (1)

YouBee
YouBee

Reputation: 2061

I have added a new answer where i have written the approach which i said in the earlier one. Here initially all the values of dropdowns are set to option1 once you change the value of any dropdown its values gets changed in json array using the id of dropdown.You can make the modifications according to your scenario. 

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>

you can try this approach however there are multiple ways.

Store your initial selected values of all your dropdowns in json with keys as the counter value which you have in the loop and value as the dropdown selected value like:

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

And add onchange event to all your dropdowns, once you change the value of any dropdown the onchange event will get triggerd and there you update the json with the current value.

Upvotes: 1

Related Questions