jquery — опция множественного выбора onChange с переполнением стека

У меня есть следующая таблица MySql:

id | type      | mark      | model | series  | year
1    worldwide  NULL         NULL    NULL      NULL
2    1          Acura        NULL    NULL      NULL
3    1          2            NSX     NULL      NULL
4    1          2            3       TunedUp   2000-2003
5    1          2            3       & nbsp    2004-2005

Я хотел бы создать выбор из четырех этапов, зависящих друг от друга. Например, выберите Sports, второе поле выберите выбрать Acura, третий NSX и четвертый TunedUP (2000 - 2003) или же & nbsp; (2004 - 2005),

Я нашел следующее решение с Динамический список опций JavaScript ToolBox, но это показывает мне много NULLценности. Я ищу более простое решение. Я пробовал поискать в Google, но я не могу даже правильно описать свою проблему.

0

Решение

/* Create table country */
CREATE TABLE `country` (
`id` tinyint(4) NOT NULL auto_increment,
`country` varchar(20) NOT NULL default '',
PRIMARY KEY  (`id`)
)

/*create table state*/
CREATE TABLE `state` (
`id` tinyint(4) NOT NULL auto_increment,
`countryid` tinyint(4) NOT NULL,
`statename` varchar(40) NOT NULL,
PRIMARY KEY  (`id`)
)

/* Create table city */
CREATE TABLE `city` (
`id` tinyint(4) NOT NULL auto_increment,
`city` varchar(50) default NULL,
`stateid` tinyint(4) default NULL,
`countryid` tinyint(4) NOT NULL,   PRIMARY KEY  (`id`)
)

Теперь, чтобы протестировать демо в работе, мы должны добавить несколько записей в каждую из таблиц. Поэтому выполните следующие запросы, чтобы добавить записи.

/* Inserting records into country table */
INSERT INTO `country` VALUES (1, 'USA');
INSERT INTO `country` VALUES (2, 'Canada');

/* Inserting records into state table */
INSERT INTO `state` VALUES (1, 1, 'New York');
INSERT INTO `state` VALUES (2, 1, 'Los Angeles');
INSERT INTO `state` VALUES (3, 2, 'British Columbia');
INSERT INTO `state` VALUES (4, 2, 'Torentu');

/* Inserting records into city table */
INSERT INTO `city` VALUES (1, 'Los Angales', 2, 1);
INSERT INTO `city` VALUES (2, 'New York', 1, 1);
INSERT INTO `city` VALUES (3, 'Toranto', 4, 2);
INSERT INTO `city` VALUES (4, 'Vancovour', 3, 2);

Теперь создайте один файл index.php и вставьте приведенный ниже код.

<form method="post" action="" name="form1">
<center>
<table width="45%"  cellspacing="0" cellpadding="0">
<tr>
<td width="75">Country</td>
<td width="50">:</td>
<td  width="150">
<select name="country" onChange="getState(this.value)">
<option value="">Select Country</option>
<?php while ($row=mysql_fetch_array($result)) { ?>
<option value=<?php echo $row['id']?>><?php echo $row['country']?></option>
<?php } ?>
</select>
</td>
</tr>
<tr style="">
<td>State</td>
<td width="50">:</td>
<td >
<div id="statediv">
<select name="state" >
<option>Select State</option>
</select>
</div>
</td>
</tr>
<tr>
<td>City</td>
<td width="50">:</td>
<td >
<div id="citydiv">
<select name="city">
<option>Select City</option>

</select>

</div>

</td>

</tr>
</table>
</center>
</form>

В выпадающем списке onChage страны мы вызвали функцию getState () javascript. Измените значения параметров раскрывающегося списка State, давайте посмотрим на код функции getState ().

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
function getState(countryId) {
var strURL="findState.php?country="+countryId;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"if (req.status == 200) {
document.getElementById('statediv').innerHTML=req.responseText;
document.getElementById('citydiv').innerHTML='<select name="city">'+
'<option>Select City</option>'+'</select>';
} else {
alert("Problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
<script>

Как вы можете видеть в приведенном выше коде, мы передаем countryid в файл findState.php, который заполняет параметры в раскрывающемся списке состояния, полученного из Ajax, приведенного ниже.

<?php $country=intval($_GET['country']);
$con = mysql_connect('localhost', 'root', '');
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('test');
$query="SELECT id,statename FROM state WHERE countryid='$country'";
$result=mysql_query($query);

?>
<select name="state" onchange="getCity(<?php echo $country?>,this.value)">
<option>Select State</option>
<?php while ($row=mysql_fetch_array($result)) { ?>
<option value=<?php echo $row['id']?>><?php echo $row['statename']?></option>
<?php } ?>
</select>

В приведенном выше коде для раскрывающегося списка состояний функция getCity () вызывается для события onChage, имеющего параметры countryId и stateId, теперь давайте рассмотрим код функции getCity ()

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
function getCity(countryId,stateId) {
var strURL="findCity.php?country="+countryId+"&state="+stateId;
var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"if (req.status == 200) {
document.getElementById('citydiv').innerHTML=req.responseText;
} else {
alert("Problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}

}

Как вы можете видеть в приведенной выше функции ajax, вызывается один файл findcity.php, и этот PHP-файл заполняет раскрывающийся список городов в соответствии с предоставленными параметрами country и state из метода get. Теперь давайте посмотрим на код findcity.php,

<?php
$countryId = intval($_GET['country']);
$stateId   = intval($_GET['state']);
$con       = mysql_connect('localhost', 'root', '');

if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db('test');
$query="SELECT id,city FROM city WHERE countryid='$countryId' AND stateid='$stateId'";
$result=mysql_query($query);

?>
<select name="city">
<option>Select City</option>
<?php while($row=mysql_fetch_array($result)) { ?>
<option value=<?php echo $row['id']?>><?php echo $row['city']?></option>
<?php } ?>
</select>
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]