0

2 つ目のドロップダウン リストは、最初のドロップダウン リストの選択に基づいています。データはmysqlデータベースから取得されます

国.sql

-- phpMyAdmin SQL Dump
-- version 3.5.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Mar 01, 2013 at 12:44 PM
-- Server version: 5.5.24-log
-- PHP Version: 5.4.3

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `lam_el_chamel_db`
--

-- --------------------------------------------------------

--
-- Table structure for table `country`
--

CREATE TABLE IF NOT EXISTS `country` (
  `country_id` int(11) NOT NULL,
  `country_name` varchar(45) NOT NULL,
  PRIMARY KEY (`country_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `country`
--

INSERT INTO `country` (`country_id`, `country_name`) VALUES
(1, 'Lebanon'),
(2, 'Afghanistan'),
(3, 'Albania'),
(4, 'Algeria'),
(5, 'Andorra'),
(6, 'Angola'),
(7, 'Antigua and Barbuda'),
(8, 'Argentina'),
(9, 'Armenia'),
(10, 'Australia'),
(11, 'Austria'),
(12, 'Azerbaijan'),
(13, 'Bahamas'),
(14, 'Bahrain'),
(15, 'Bangladesh'),
(16, 'Barbados'),
(17, 'Belarus'),
(18, 'Belgium'),
(19, 'Belize'),
(20, 'Benin '),
(21, 'Bhutan'),
(22, 'Bolivia'),
(23, 'Bosnia and Herzegovina'),
(24, 'Botswana'),
(25, 'Brazil'),
(26, 'Brunei '),
(27, 'Bulgaria'),
(28, 'Burkina Faso'),
(29, 'Burma'),
(30, 'Burundi'),
(31, 'Cambodia'),
(32, 'Cameroon'),
(33, 'Canada'),
(34, 'Cape Verde'),
(35, 'Central African Republic'),
(36, 'Chad'),
(37, 'Chile'),
(38, 'China'),
(39, 'Colombia'),
(40, 'Comoros '),
(41, 'Congo'),
(42, 'Costa Rica'),
(43, 'Cote d''Ivoire'),
(44, 'Croatia'),
(45, 'Cuba'),
(46, 'Cyprus'),
(47, 'Czech Republic'),
(48, 'Denmark'),
(49, 'Djibouti'),
(50, 'Dominica'),
(51, 'Ecuador'),
(52, 'Egypt'),
(53, 'Estonia'),
(54, 'Ethiopia'),
(55, 'Fiji'),
(56, 'Finland'),
(57, 'France'),
(58, 'Georgia'),
(59, 'Germany'),
(60, 'Ghana'),
(61, 'Greece'),
(62, 'Guatemala'),
(63, 'Guinea'),
(64, 'Haiti'),
(65, 'Hong Kong'),
(66, 'Hungary'),
(67, 'Iceland'),
(68, 'India'),
(69, 'Indonesia'),
(70, 'Iran'),
(71, 'Iraq'),
(72, 'Ireland'),
(73, 'Italy'),
(74, 'Jamaica'),
(75, 'Japan'),
(76, 'Jordan '),
(77, 'Kazakhstan'),
(78, 'Korea, North'),
(79, 'Korea, South'),
(80, 'Kosovo'),
(81, 'Kuwait'),
(82, 'Laos'),
(83, 'Latvia'),
(84, 'Libya'),
(85, 'Luxembourg'),
(86, 'Madagascar'),
(87, 'Malaysia'),
(88, 'Maldives'),
(89, 'Mali'),
(90, 'Malta'),
(91, 'Mauritania'),
(92, 'Mexico'),
(93, 'Moldova'),
(94, 'Monaco'),
(95, 'Montenegro'),
(96, 'Morocco'),
(97, 'Mozambique'),
(98, 'Nepal'),
(99, 'Netherlands'),
(100, 'New Zealand'),
(101, 'Nicaragua'),
(102, 'Nigeria'),
(103, 'Norway'),
(104, 'Oman'),
(105, 'Pakistan'),
(106, 'Palestinian'),
(107, 'Panama'),
(108, 'Paraguay'),
(109, 'Peru'),
(110, 'Philippines'),
(111, 'Poland'),
(112, 'Portugal'),
(113, 'Qatar'),
(114, 'Romania'),
(115, 'Russia'),
(116, 'Saudi Arabia'),
(117, 'Senegal'),
(118, 'Serbia'),
(119, 'Singapore'),
(120, 'Slovakia'),
(121, 'Slovenia'),
(122, 'Spain '),
(123, 'Sri Lanka'),
(124, 'Sudan'),
(125, 'Swaziland '),
(126, 'Sweden'),
(127, 'Syria'),
(128, 'Taiwan'),
(129, 'Tanzania'),
(130, 'Thailand '),
(131, 'Tunisia'),
(132, 'Turkey'),
(133, 'Ukraine'),
(134, 'United Arab Emirates'),
(135, 'United Kingdom'),
(136, 'Uruguay'),
(137, 'Uzbekistan'),
(138, 'Venezuela'),
(139, 'Vietnam'),
(140, 'Yemen'),
(141, 'Zambia'),
(142, 'Zimbabwe ');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

行政機関.sql

-- phpMyAdmin SQL Dump
-- version 3.5.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Mar 01, 2013 at 12:45 PM
-- Server version: 5.5.24-log
-- PHP Version: 5.4.3

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `lam_el_chamel_db`
--

-- --------------------------------------------------------

--
-- Table structure for table `governorate`
--

CREATE TABLE IF NOT EXISTS `governorate` (
  `governorate_id` int(11) NOT NULL,
  `governorate_name` varchar(60) NOT NULL,
  `country_id` int(11) NOT NULL,
  PRIMARY KEY (`governorate_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `governorate`
--

INSERT INTO `governorate` (`governorate_id`, `governorate_name`, `country_id`) VALUES
(1, 'Beirut', 1),
(2, 'Mount Lebanon', 1),
(3, 'North', 1),
(4, 'Beqaa ', 1),
(5, 'Nabatiye', 1),
(6, 'South', 1);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Playing With Select list</title>
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
        <!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
        $(".country").change(function()
        {
        var id=$(this).val();
        var dataString = 'id='+ id;

        $.ajax
        ({
        type: "POST",
        url: "ajax_category.php",
        data: dataString,
        cache: false,
        success: function(html)
        {
        $(".governorate").html(html);
        } 
        });

        });
        });
    </script>

    </head>
    <body>
        <div class="container">
            <header>
                <h1><strong>Playing With Select List</strong></h1>
                <h2>Select One List To see Output On Other</h2>
            </header>
        </div>
    <span style="margin-left:22%">
            <label>country :</label> <select name="country" class="category">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
$sql=mysql_query("select country_id,country_name from country");
while($row=mysql_fetch_array($sql))
{
$id=$row['country_id'];
$data=$row['country_name'];
echo '<option value="'.$id.'">'.$data.'</option>';
 } ?>
</select> &nbsp;&nbsp;&nbsp;
<div class="governorate">

<label>Governorate :</label> <select name="governorate" class="subcategory">
<option selected="selected">--Select governorate--</option>

</select>
</div>
</span>
<br><br><br>
                <h1><center><strong>Go To-:<a href="www.tricktodesign.com">TrickToDesign</a></strong></center></h1>
    </body>
</html>

ajax_category.php

   <?php
include('db.php');
if($_POST['governorate_id'])
{
$id=$_POST['governorate_id'];
$sql=mysql_query("select b.governorate_id,b.governorate_name from governorate a,contry_id b where b.country_id=a.country_id and parent='$id'");

while($row=mysql_fetch_array($sql))
{
//$id=$row['governorate_id'];
//$data=$row['governorate_name'];

echo"<select name='governorate'>";
echo '<option value="'.$id.'">'.$data.'</option>';
echo "</select>";
}
}

?>

2番目のドロップリストにデータを表示する方法は、私が直面しているエラーです

PS:インデックス .php と ajax_category.php を編集します

4

3 に答える 3

4

あなたのコード:

success: function(html)
        {
        $(".governorate").html(html);
        } 

governorateしかし、あなたのhtmlにはクラスがありません

コードを次のように変更します: (ラップされた div に注意してください)

<div class="governorate">
<select name="governorate" class="subcategory">
<option selected="selected">--Select governorate--</option>

</select>
<div>

PHPページで:

echo "<select name=....>";
echo '<option value="'.$id.'">'.$data.'</option>';
echo "</select>";
于 2013-03-01T12:53:26.600 に答える
2

(".governorate")Jquery でドロップダウンにアクセスしています。しかし、ドロップダウンにクラスがありません。その中にクラスを追加するだけです。コードを次のように変更します。

 $("select[name='governorate']").html(html);
于 2013-03-01T12:57:45.577 に答える
0

index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Playing With Select list</title>
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
        <!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
        $(".country").change(function()
        {
          var id = $(this).val();

        $.getJSON('new_category.php?id='+id+'', function(data) {
            $('.governorate').html("");
            $('.governorate').append('<option value=0>--Select governorate--</option>');
            $(data).each(function(){
                $('.governorate').append('<option value='+this.governorate_id+'>'+this.governorate_name+'</option>');
                });
            });


            });
        });
    </script>

    </head>
    <body>
        <div class="container">
            <header>
                <h1><strong>Playing With Select List</strong></h1>
                <h2>Select One List To see Output On Other</h2>
            </header>
        </div>
    <span style="margin-left:22%">
            <label>country :</label> <select class="country" >
<option selected="selected">--Select Country--</option>
<?php
include('connect.php');
$sql=mysql_query("select country_id,country_name from test1.country");
while($row=mysql_fetch_array($sql))
{
$id=$row['country_id'];
$data=$row['country_name'];
echo '<option value="'.$id.'">'.$data.'</option>';
 } ?>
</select> &nbsp;&nbsp;&nbsp;
<label>Governorate :</label> <select class="governorate" >
<option selected="selected">--Select governorate--</option>

</select>
</span>
<br><br><br>
                <h1><center><strong>Go To-:<a href="www.tricktodesign.com">TrickToDesign</a></strong></center></h1>
    </body>
</html>

new_category.php

<?php
include('connect.php');
header("Content-type: text/javascript");
$id=$_GET['id'];

$sql=mysql_query("SELECT governorate_id, governorate_name FROM test1.governorate WHERE country_id=$id");

while($row=mysql_fetch_array($sql))
{
    $gArray['governorate_id'] =  $row['governorate_id'];
    $gArray['governorate_name'] = $row['governorate_name'];
    $g[] = $gArray;
}
echo json_encode($g);


?>

簡単な説明:

選択した国の ID を get パラメータで送信すると、getJson メソッドは、ID に応じた行政の詳細を含む JSON リストを取得します。次に、jquery の各関数が詳細を追加します。

于 2013-03-01T14:20:17.033 に答える