问题
Please see: mycellularcenter.com/phones
I want to duplicate this functionality in javascript/JQuery, but am not familiar enough with the language to even know what to look for.
By functionality, I mean the ability to select one or more of the items in the left column and have the content of the right-hand column show/hide to meet the selected checkbox criteria.
I can make rows/divs show/hide based on clicks on text in other columns, but not sure how to concatenate/iterate? through multiple selections.
Advice/help is appreciated.
JC
回答1:
This is done with an ajax request
it grabs the form data, sends it via an ajax request to the server and the server processes the form data, performs the search in it's database and then returns either json or xml to the javascript which then dynamically builds each row for each item
回答2:
You certainly do this with AJAX. Another alternative is to use the jQuery filter() function.
回答3:
Doing it server side it's surely easier, but it's not a must, especially if you will not use very complex filters
Take a look at this jQuery plugin
http://plugins.jquery.com/project/uiTableFilter
回答4:
What it looks like you would need to do is see when a checkbox has been changed, and reload the content (through ajax, with xml/html/json) into the div. http://jsfiddle.net/mazzzzz/ABk4R/6/ is the javascript I would use, and the php would be something like:
script.php
<?php
$firstcheckboxChecked = $_POST['1'];
if ($firstcheckboxChecked)
echo 'crap because first checkbox was checked';
?>
Each checkbox is sent to the php in the $_POST variable, so checkbox <input type="checkbox" value="te" /> would be accessed with $_POST['te'] (which is true is the checkbox is checked, and false if not). Then the html generated by this page is put into the container div (replacing the old content in that div).
回答5:
I recently did something like this, and was able to refactor it to what I believe you want. It's too detailed to explain in here, so check out the comments in the code, and this example:
http://jsbin.com/adaru3/edit
来源：https://stackoverflow.com/questions/5504407/filter-divs-table-rows-based-on-checkbox-criteria-javascript-jquery