我想在用户从下拉列表中选择值后更改为表格中的内容。有两个下拉菜单 - 一个用于选择用户，另一个用于选择脚本。我希望当用户选择一个用户时，该表将只显示所选用户的行和脚本相同的行。 这是我的下拉列表：
include_once "dbConnect.php";
$query = "SELECT user_id FROM users";
$result = mysql_query($query); ?>
<select name="select1">
<?php while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?>
<option value="<?php echo $line['user_id'];?>">
<?php echo $line['user_id'];?>
</option>
<?php } ?>
</select>
<?php
include_once "dbConnect.php";
$query = "SELECT script_name FROM scripts";
$result = mysql_query($query); ?>
<select name="select1">
<?php while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?>
<option value="<?php echo $line['script_name'];?>">
<?php echo $line['script_name'];?>
</option>
<?php } ?>
</select>
表格中的数据：
$json_response = array();
$results= mysql_query("select user_id,script_name,cron_format from users,scripts");
while ($row = mysql_fetch_array($results, MYSQL_ASSOC)) {
array_push($json_response,$row);
}
echo json_encode($json_response);
这是表格：
<table class="table table-bordered table-hover">
<thead>
<td>user name</td>
<td>script name</td>
<td>cron format</td>
<td>schedule last update</td>
<td>next execution time</td>
<td>script exec</td>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.user_id}}</td>
<td>{{x.script_name}}</td>
<td><span class="editme" contenteditable="true">{{x.cron_format}}</span></td>
<td>{{x.schedule_last_update}}</td>
<td>{{x.next_execution_time}}</td>
<td>{{x.script_exec}}</td>
</tr>
</tbody>
</table>
显示所有用户和每个用户的所有脚本。 任何解决方案都很棒但是angularJs会很棒++ ...谢谢
答案 0 :(得分：1)
以下jQuery解决方案应该适合您。只需将class='filterElements'提供给您希望能够过滤表的任何select元素。元素上的data-cell-to-filter="c0"属性将确定元素将过滤哪个单元格。
$(function() {
$('#table').filterRowsByValue( $('.filterElements') );
// $('.filterElements').change(); // uncomment to start with blank table
});
jQuery.fn.filterRowsByValue = function(masterSelects) {
return this.each(function() {
var table = this;
var rows = [];
$(table).find('tr').each(function() {
var cells={};
$(this).find('td').each (function(i, e) {
cells['c'+i] = $(this).html();
});
rows.push(cells);
});
$(table).data('tr', rows);
masterSelects.bind('change', function() {
var cur=this;
masterSelects.each(function(i,e){
if( e != cur ){
$(e).val("0");
}
});
var rows = $(table).empty().scrollTop(0).data('tr');
var search = '^'+$.trim($(this).val())+'$';
var regex = new RegExp(search,'gi');
var cel = $(this).data( "cell-to-filter" );
$.each(rows, function(i,e) {
var row = rows[i];
if(row[cel].match(regex) !== null) {
var cellArr=[];
for (var curCell in row) {
if(row.hasOwnProperty(cel)){
cellArr.push('<td>'+row[curCell]+'</td>');
}
}
$(table).append( '<tr>'+cellArr.join('')+'</tr>' );
}
});
});
});
};.table-bordered, .table-bordered td{
border: thin solid #575656;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selection">
<select name='user' class='filterElements' data-cell-to-filter="c0">
<option value = '0'>(Select user)</option>
<option value = '1'>1</option>
<option value = '2'>2</option>
<option value = '3'>3</option>
<option value = '4'>4</option>
<option value = '5'>5</option>
</select>
<select name='scripts' class='filterElements' data-cell-to-filter="c1">
<option value = '0'>(Select script)</option>
<option value='script_one'>script_one</option>
<option value='script_two'>script_two</option>
<option value='script_three'>script_three</option>
<option value='script_four'>script_foure</option>
<option value='script_five'>script_five</option>
</select>
</div>
<table class="table table-bordered table-hover">
<thead>
<td>user name</td>
<td>script name</td>
<td>cron format</td>
<td>schedule last update</td>
<td>next execution time</td>
<td>script exec</td>
</thead>
<tbody id="table" >
<tr ng-repeat="x in data">
<td>1</td>
<td>script_five</td>
<td><span class="editme"three lass="editme" contenteditable="true">Some stuff</span></td>
<td>7/11/14</td>
<td>15:00</td>
<td>Some stuff</td>
</tr>
<tr ng-repeat="x in data">
<td>1</td>
<td>script_three</td>
<td><span class="editme" contenteditable="true">Some stuff</span></td>
<td>7/11/14</td>
<td>15:00</td>
<td>Some stuff</td>
</tr>
<tr ng-repeat="x in data">
<td>2</td>
<td>script_one</td>
<td><span class="editme" contenteditable="true">Some stuff</span></td>
<td>7/11/14</td>
<td>15:00</td>
<td>Some stuff</td>
</tr>
<tr ng-repeat="x in data">
<td>3</td>
<td>script_five</td>
<td><span class="editme" contenteditable="true">Some stuff</span></td>
<td>7/11/14</td>
<td>15:00</td>
<td>Some stuff</td>
</tr>
<tr ng-repeat="x in data">
<td>1</td>
<td>script_two</td>
<td><span class="editme" contenteditable="true">Some stuff</span></td>
<td>7/11/14</td>
<td>15:00</td>
<td>Some stuff</td>
</tr>
<tr ng-repeat="x in data">
<td>2</td>
<td>script_two</td>
<td><span class="editme" contenteditable="true">Some stuff</span></td>
<td>7/11/14</td>
<td>15:00</td>
<td>Some stuff</td>
</tr>
<tr ng-repeat="x in data">
<td>5</td>
<td>script_five</td>
<td><span class="editme" contenteditable="true">Some stuff</span></td>
<td>7/11/14</td>
<td>15:00</td>
<td>Some stuff</td>
</tr>
<tr ng-repeat="x in data">
<td>5</td>
<td>script_one</td>
<td><span class="editme" contenteditable="true">Some stuff</span></td>
<td>7/11/14</td>
<td>15:00</td>
<td>Some stuff</td>
</tr>
<tr ng-repeat="x in data">
<td>4</td>
<td>script_five</td>
<td><span class="editme" contenteditable="true">Some stuff</span></td>
<td>7/11/14</td>
<td>15:00</td>
<td>Some stuff</td>
</tr>
<tr ng-repeat="x in data">
<td>1</td>
<td>script_four</td>
<td><span class="editme" contenteditable="true">Some stuff</span></td>
<td>7/11/14</td>
<td>15:00</td>
<td>Some stuff</td>
</tr>
</tbody>
</table>