在表内创建可靠的下拉列表
我正在尝试将另一个下拉列表添加到我的表中，该下拉列表在我的第一个下拉列表中是可靠的。我设法将第一个下拉列表添加到每一行，但无法创建第二个。
在我的 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>
至尊宝的传说2回答
-
UYOU
$('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);});
随时随地看视频慕课网APP
相关分类
JavaScript