根据导入的值在表的下拉列表中设置一个值 [javascript, jquery]

Question

I have a table that is filled dynamically with a csv file.我有一个用 csv 文件动态填充的表。 I created a table that inside itself has dropdowns in some columns.我创建了一个表格，该表格本身在某些列中有下拉菜单。

What I want to do now is to check if a value exists in the cell where the dropdown is supposed to be, if so to check if it exists in the dropdownlist if yes then set this as selected in dropdown list otherwise selected is at default value and the cell gets red margine around.我现在要做的是检查一个值是否存在于下拉列表应该存在的单元格中，如果存在，则检查它是否存在于下拉列表中，如果是，则将其设置为在下拉列表中选择，否则选择为默认值并且单元格周围出现红色边缘。

Here is a jsFiddle with an example as how my code currently looks like:这是一个 jsFiddle，其中有一个示例，说明我的代码当前的样子：

https://jsfiddle.net/r236uy5k/ https://jsfiddle.net/r236uy5k/

EDIT : I corrected my jsfiddle: https://jsfiddle.net/kcau7jhd/编辑：我更正了我的 jsfiddle： https://jsfiddle.net/kcau7jhd/

 $(function(){ var firstDDM = ['aaa','bbb','ccc','ddd']; var firstshortcut = ['a','b','c','d']; var option = "", select = ""; for(var i=0; i<firstDDM.length;i++){ option += '<option value="'+ firstshortcut[i] + '">' + firstDDM[i] + '</option>'; } select = '<select class="firstDDM" type="firstDDM">' + option + '</select>'; $("tr").each(function() { $(this).find("td:eq(3)").append(select); }); }); $(function(){ var secondDDM = ['Default','AAA','BBB','B1','C']; var secondshortcut = ['Default','a','b','b1','c']; var option = "", select = ""; for(var i=0; i<secondDDM.length;i++){ option += '<option value="'+ secondshortcut[i] + '">' + secondDDM[i] + '</option>'; } select = '<select class="secondDDM" type="secondDDM">' + option + '</select>'; $("tr").each(function() { $(this).find("td:eq(5)").append(select); }); }); $("#addRow").click(function(){ $("#my_id").each(function(){ var tds='<tr>'; jQuery.each($('tr:last th', this), function(){ tds += '<th>' +'<input type="checkbox" name="record" tittle="Delete this row"></input>' + '</th>'; }); jQuery.each($('tr:last td', this), function(){ if($('select',this).length){ tds+= '<td>' + $(this).html() + '</td>'; }else{ tds+= '<td></td>'; } }); tds+= '</tr>'; $('tbody',this).append(tds); $('#my_id tbody tr:last').attr("contentEditable", true); }); }); //for the columns that need to be imported with dropdowns create editable option - temporarlly $(function() { $("tr").each(function() { $(this).find("td:eq(3), td:eq(4),td:eq(5)").attr("contentEditable", true); }); }); //Find and remove selected table rows $('#delete-row').click(function(){ var r = confirm('Are you sure you want to delete them all?'); $("tbody").find('input[name="record"]').each(function(){ if($(this).is(":checked")){ if(r == true){ $(this).parents("tr").remove(); }else{ return false; } } }); });

 table { border-collapse: collapse; border: 1px black solid; font: 12px sans-serif; width: 100%; table-layout:auto; } td { border: 1px black solid; text-align: left; padding: 2px; } thead:hover{ text-decoration: none;important: } thead tr:first-child{ color;white: text-align; center: background-color; #5bc0de: padding; 10px: } tr:nth-child(even){ background-color: #f2f2f2 } tr:hover{ background-color; #5bc0de: } button{ display; inline: padding; 50px: } input button{ display; inline. }:dropbtn{ background-color; blue. }:table-responsive { overflow-y; auto: height; 800px. }:table-responsive table { border-collapse; collapse: width; 100%. }:table-responsive thead th{ position; sticky: top; 0: background-color; #5bc0de: padding; 2px: }::-webkit-scrollbar { width; 12px: }::-webkit-scrollbar-thumb { background-color; darkgrey: outline; 1px solid slategrey. }:myButtons{ display; inline: padding; 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <title>Filtered CSV File</title> </head> <body> <h1> Filtered CSV FIle </h1> <br/> <br/> <div class="myButtons"> <input type="button" value="Add new row" class="btn btn-info" id="addRow"> <input type="button" value="Delete rows" id="delete-row" class="btn btn-info"> </div> <br/> <div class="table-responsive"> <table class="dataframe my_class" id="my_id"> <thead> <tr style="text-align:right;"> <th> </th> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> <th>col6</th> <th>col7</th> <th>col8</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>row1</td> <td>row1</td> <td>row1</td> <td></td> <td>row1</td> <td>B1</td> <td>row1</td> <td>row1</td> </tr> <tr> <th>2</th> <td>row2</td> <td>row2</td> <td>row2</td> <td></td> <td>row2</td> <td>AAA</td> <td>row2</td> <td>row2</td> </tr> <tr> <th>3</th> <td>row3</td> <td>row3</td> <td>row3</td> <td></td> <td>row3</td> <td>C</td> <td>row3</td> <td>row3</td> </tr> </tbody> </table> </div> </body> </html>

Answer 1

You can edit the select text you are entering.您可以编辑正在输入的 select 文本。 Following are the things which I think you want to achieve:以下是我认为您想要实现的目标：

Identify if the dropdown has a certain value and preselect them if possible.确定下拉菜单是否具有特定值并在可能的情况下预先选择它们。
If the dropdown does not have correct value for pre selection then mark them as error field .如果下拉列表没有正确的预选择值，则将它们标记为错误字段。

If the above mentioned points are incorrect please let me know i will make the relevant changes which are required.如果上述几点不正确，请告诉我，我将进行所需的相关更改。

I have added a condition check if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML) you can replace it with any condition that you want.我添加了一个条件检查if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML)你可以用你想要的任何条件替换它。

Replace the following jquery snippets替换以下 jquery 片段

$("tr").each(function () {
    var option = "",
        select = "",
        classObject = '',
        isSelected = false;

    if($(this).find("td:eq(3)")[0]){

        for (var i = 0; i < firstDDM.length; i++) {
            if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML) {
                option += '<option selected="selected" value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
                isSelected = true;
            }
            else
                option += '<option value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
        }
        classObject = !isSelected ? 'errorDropDown' : '';
        select = '<select class="firstDDM' + ' ' + classObject + '" type="firstDDM">' + option + '</select>'

        $(this).find("td:eq(3)").append(select);
    }        
});

Add this class to the css file:将此 class 添加到 css 文件中：

.errorDropDown {border: 1px solid red;}

根据导入的值在表的下拉列表中设置一个值 [javascript, jquery]

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-10-29 14:18:57

根据导入的值在表的下拉列表中设置一个值 [javascript, jquery]

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-10-29 14:18:57

解决方案1
1 已采纳 2019-10-29 14:18:57