我试图将另一个下拉列表添加到我的第一个下拉列表中可靠的表中。我设法将第一个下拉列表添加到每一行，但无法创建第二个下拉列表。
在col6上的小提琴代码示例中，我想使用jquery创建新的下拉列表（就像我已经对第一个下拉列表所做的那样），但是其选项取决于第一个下拉列表中的选项。在第一个下拉列表中，我选择一个值“ aaa”，然后在第二个下拉列表中，仅显示数组“ A”中的选项，依此类推。 -
https://jsfiddle.net/Lqopej93/
我尝试了很少的代码，但是都没有解决。
<html>
<head>
<title>Filtered CSV File</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.css"/>
</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><select name="code">
<option value="a">AAA</option>
<option value="b">BBB</option>
</select></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><select name="code">
<option value="a">AAA</option>
<option value="b">BBB</option>
</select></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><select name="code">
<option value="a">AAA</option>
<option value="b">BBB</option>
</select></td>
<td>row3</td>
<td>row3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
$(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);
});
});
var A = ['A1','A2','A3'];
var B = ['B1','B2','B3'];
var C = ['C1','C2','C3'];
var D = ['D1','D2','D3'];
$("#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;
}
}
});
});
答案 0 :(得分：1)
$('table').on('change', 'select', function(){
var selVal = eval($(this).val().toUpperCase());
option = "";
select = "";
for(var i=0; i<selVal.length;i++){
option += '<option value="'+ selVal + '">' + selVal[i] + '</option>';
}
select = '<select class="firstDDM" type="firstDDM">' + option + '</select>';
console.log(option);
$(this).parent('td').nextAll('td').find('select').parent('td').empty().append(select);
});
答案 1 :(得分：0)
您只需复制逻辑并交换变量名称/值：
$(function(){
//---YOUR CODE----
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>';
//---SAME CODE - DIFFRENT VAR-NAMES---
var secondshortcut = ['a','b'];
var secondDDM = ['AAA','BBB'];
var option2 = "",
select2 = "";
for(var j=0; j<secondDDM.length;j++){
option2 += '<option value="'+ secondshortcut[j] + '">' + secondDDM[j] + '</option>';
}
select2 = '<select name="code">' + option2 + '</select>';
$("tr").each(function() {
$(this).find("td:eq(3)").append(select);
$(this).find("td:eq(5)").append(select2);
});
})
编辑： 进行2个从属选择：
let optsA = ['A1','A2','A3'];
let optsB = ['B1','B2','B3'];
let optsC = ['C1','C2','C3'];
$('[name="s1"]').on('change', function () {
let val = $(this).val();
let opts;
let options = [];
if(val === 'a') {
opts = optsA;
} else if(val === 'b') {
opts = optsB;
} else {
opts = optsC;
}
for(let i = 0; i < opts.length; i++) {
options.push('<option value="' + opts[i] + '">' + opts[i] + '</option>');
}
$('[name="s2"]').html(options.join(''));
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<select name="s1">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<select name="s2"></select>
现在您可以自己将这两件事放在一起：）