我还没有找到解决方案，需要一些新的眼睛来解决这个问题。基本上你自动完成搜索车辆，并在选择过滤器请求与json填写模型选择列表。一切正常，除非我创建一行并选择自动完成值，它只链接到第一行模型而不是附加行。我打算为基于品牌的模型做另一个过滤器（不是在这个例子中）。
JS：
function setAutocomplete() {
$('#vehicle_id').val("");
$text = jQuery(".veh_selector");
$.each($text, function(i, val) {
$(val).autocomplete({
source: 'vehicles.php',
minLength: 2,
select: function(event, ui) {
$('#veh_desc_id').val(ui.item.id);
$('#vehicle_id').val(ui.item.vehicle_id);
$.getJSON("vehicles.php?filter=" + ui.item.vehicle_id, function(jsonData) {
$("select.model").html(""); //clear old options
jsonData = eval(jsonData); //get json array
for (i = 0; i < jsonData.length; i++) //iterate over all options
{
for (key in jsonData[i]) //get key => value
{
$("select.model").get(0).add(new Option(jsonData[i][key], [key]), document.all ? i : null);
}
}
});
}
});
});
}
var current = 0;
var addVehicleFields = function() {
current++;
$newVehicle = $("#searchtemplate").clone();
$newVehicle.removeAttr("id");
$newVehicle.removeClass("hide_element");
$prefix = "extra" + current;
$newVehicle.children("div").children(":input").each(function(i) {
var $currentElem = $(this);
$currentElem.attr("name", $prefix + $currentElem.attr("name"));
});
$newVehicle.appendTo("#vehiclesField");
$('.remove-this').show('fast');
$('#remove-me').removeAttr('disabled');
setAutocomplete();
}
$(document).ready(function() {
setAutocomplete();
$("#addVehicle").live("click", addVehicleFields);
$('.remove-this').live('click', function() {
$(this).parent().remove();
});
});
html
<div id="models-makes">
<fieldset id="vehiclesField">
<label>Search Vehicles</label>
<div class="vehicle"></div>
</div>
</fieldset>
<div>
<div class="model-make original">
<label for="veh_desc"></label>
<input type="hidden" class="veh_selector" id="veh" name="veh" size="30"/>
</p>
<input type="hidden" id="veh_desc_id" name="veh_desc_id" />
<div class="vehicle hide_element" id="searchtemplate">
<input class="veh_selector" id="veh" name="_veh" size="30"/>
<select class="model empty">
<option>Models</option>
</select>
<select class="make empty">
<option>Makes</option>
</select>
<input name="remove-this" class="remove-this" value="Remove" type="button">
</div>
</div>
</div>
<div>
<input type="button" id="addVehicle" value="Add A Vehicle">
<input name="reset" id="reset" value="Reset" type="reset">
</div>
答案 0 :(得分：0)
我没有把它放在测试服务器上的任何地方，因为实际上没什么可放的。下面是车辆的sql ex和两个文件：getvehicles.php和makevehicles.php。也是更新的js。谢谢
SQL
CREATE TABLE `vehicles` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`vehicle_id` int(11) DEFAULT NULL,
`veh_desc` text CHARACTER SET latin1,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
INSERT INTO `vehicles` VALUES ('1', '1', 'Car');
INSERT INTO `vehicles` VALUES ('2', '2', 'Minivan');
INSERT INTO `vehicles` VALUES ('3', '3', 'Truck');
CREATE TABLE `makevehicles` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`vehicle_id` int(11) NOT NULL DEFAULT '0',
`make` text CHARACTER SET latin1,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
INSERT INTO `makevehicles` VALUES ('1', '1', 'Acura');
INSERT INTO `makevehicles` VALUES ('2', '1', 'Audi');
INSERT INTO `makevehicles` VALUES ('3', '1', 'BMW');
INSERT INTO `makevehicles` VALUES ('4', '2', 'Dodge');
INSERT INTO `makevehicles` VALUES ('5', '3', 'Chevy');
getvehicles.php
<?php
$username = "root";
$password = "";
$hostname = "localhost";
$dbh = mysql_connect($hostname, $username, $password) or die("Unable to connect
to MySQL");
$selected = mysql_select_db("DATABASE_NAME",$dbh) or die("Could not connect");
$return_arr = array();
$fetch = mysql_query("SELECT * FROM vehicles where veh_desc like '%" . mysql_real_escape_string($_GET["term"]) . "%'");
/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['id'] = $row['id'];
$row_array['value'] = $row['veh_desc'];
$row_array['vehicle_id'] = $row['vehicle_id'];
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);
?>
makevehicles.php
<?php
$username = "root";
$password = "";
$hostname = "localhost";
$dbh = mysql_connect($hostname, $username, $password) or die("Unable to connect
to MySQL");
$selected = mysql_select_db("DATABASE_NAME",$dbh) or die("Could not connect");
$filter = strtolower($_GET["filter"]);
$query =
"SELECT vehicle_id, make FROM makevehicles WHERE vehicle_id='$filter'";
$result=mysql_query($query);
$outArray = array();
if ($result) {
while ($row = mysql_fetch_assoc($result)) $outArray[] = $row;
}
echo json_encode($outArray);
?>
更新了JS。我所做的就是更改自动完成源和上面两个文件的getJSON网址。我的脚本非常复杂，所以就把这两个拿出来了。如果这有帮助，请告诉我。顺便说一句：我修复了HTML但仍然没有去。这使用jqueryui。如果您需要，请告诉我。
function setAutocomplete() {
$('#vehicle_id').val("");
$text = jQuery(".veh_selector");
$.each($text, function(i, val) {
$(val).autocomplete({
source: 'getvehicles.php',
minLength: 2,
select: function(event, ui) {
$('#veh_desc_id').val(ui.item.id);
$('#vehicle_id').val(ui.item.vehicle_id);
$.getJSON("makevehicles.php?filter=" + ui.item.vehicle_id, function(jsonData) {
$("select.model").html(""); //clear old options
jsonData = eval(jsonData); //get json array
for (i = 0; i < jsonData.length; i++) //iterate over all options
{
for (key in jsonData[i]) //get key => value
{
$("select.model").get(0).add(new Option(jsonData[i][key], [key]), document.all ? i : null);
}
}
});
}
});
});
}
var current = 0;
var addVehicleFields = function() {
current++;
$newVehicle = $("#searchtemplate").clone();
$newVehicle.removeAttr("id");
$newVehicle.removeClass("hide_element");
$prefix = "extra" + current;
$newVehicle.children("div").children(":input").each(function(i) {
var $currentElem = $(this);
$currentElem.attr("name", $prefix + $currentElem.attr("name"));
});
$newVehicle.appendTo("#vehiclesField");
$('.remove-this').show('fast');
$('#remove-me').removeAttr('disabled');
setAutocomplete();
}
$(document).ready(function() {
setAutocomplete();
$("#addVehicle").live("click", addVehicleFields);
$('.remove-this').live('click', function() {
$(this).parent().remove();
});
});