首先下拉菜单自动更改第二个下拉列表的选项 [英] First drop down menu to auto change the options of a second dropdown

查看：91
本文介绍了首先下拉菜单自动更改第二个下拉列表的选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



第一个，让用户选择一个类别。



 < select name =category> 
< option value =0>无< / option> 
< option value =1>第一个< / option> 
< option value =2>第二个< / option> 
< option value =3>第三< / option> 
< option value =4>第四< / option> 
< / select>

第二个选项取决于第一个下拉菜单中的选项。例如，如果用户选择第一选项，则第二个下拉菜单将显示 

 < select NAME = 项 > 
< option value =3>智能手机< / option> 
< option value =8>充电器< / option> 
< / select>

但是当用户改变主意时，或者先选择第二个选项，那么第二个下拉菜单现在会显示

 < select name =items> 
< option value =1>篮球< / option> 
< option value =4>排球< / option> 
< / select>

我的问题是我该如何实现这个目标？这可以在不使用数据库的情况下完成吗？



谢谢！

解决方案

见下面的不使用数据库的工作示例。

使用MySQL数据库的工作示例



如果您想要连接它使用数据库，是的，这当然是可能的。考虑这张表： 

  CREATE TABLE`contents`（
`id` INT PRIMARY KEY AUTO_INCREMENT，
 `name` VARCHAR（255），
`parent` INT DEFAULT 0 
）; 
 
 INSERT INTO`contents`（`name`，`parent`）VALUES 
（'Names'，0），
（'Places'，0），
（'Animals'，0），
（'Praveen'，1），
（'Bill Gates'，1），
（'Steve Jobs'，1），
（'India'，2），
（'New York'，2），
（'London'，2），
（'Singapore'，2），
 （'Cat'，3），
（'Dog'，3），
（'Tiger'，3），
（'Deer'，3）



表格结构



  +  - --- + ------------ + -------- + 
 | id |名称|父母| 
 + ---- + ------------ + -------- + 
 | 1 |名称| 0 | 
 | 2 |地方| 0 | 
 | 3 |动物| 0 | 
 | 4 | Praveen | 1 | 
 | 5 |比尔盖茨| 1 | 
 | 6 |史蒂夫乔布斯| 1 | 
 | 7 |印度| 2 | 
 | 8 |纽约| 2 | 
 | 9 |伦敦| 2 | 
 | 10 |新加坡| 2 | 
 | 11 |猫| 3 | 
 | 12 |狗| 3 | 
 | 13 |虎| 3 | 
 | 14 |鹿| 3 | 
 + ---- + ------------ + -------- +



初始HTML& PHP代码



现在，让我们使用PHP首先填充最初的< select> ：

 <？php 
 mysql_connect（）; 
 mysql_select_db（contents）; 
 $ result = mysql_query（SELECT * FROM`contents` WHERE`parent` = 0）; 
 while（（$ data = mysql_fetch_array（$ result））！== false）
 echo'< option value =''，$ data ['id']，'>'，$ data ['name']，'< / option>'
？>

现在< select> 已准备就绪。通过它的onchange函数，我们可以触发一个AJAX事件来获取新的< select> ，其中父数据由< select> / code>。

 < select onchange =ajaxfunction（this.value）> 
 <！ - 选项在这里最初会被填充 - > 
< / select>

现在使用jQuery函数，您可以这样做：

 < script type =text / javascript> 
函数ajaxfunction（parent）
 {
 $ .ajax（{
 url：'process.php？parent ='+ parent; 
 success：function（data） {
 $（＃sub）。html（data）; 
} 
}）; 
} 
< / script>

在HTML中，在< select> ，你需要用 id 作为 sub 给另一个选择 $ c $> 

 < select onchange =ajaxfunction（this.value）> 
 <！ - 选项在这里最初会被填充 - > 
< / select> 
< select id =sub>< / select>



处理PHP源代码



最后源代码 process.php ：

 <？php 
 mysql_connect（）; 
 mysql_select_db（contents）; 
 $ result = mysql_query（SELECT * FROM`contents` WHERE`parent` =。mysql_real_escape_string（$ _ GET [parent]））; 
 while（（$ data = mysql_fetch_array（$ result））！== false）
 echo'< option value =''，$ data ['id']，'>'，$ data ['name']，'< / option>'
？>



不使用数据库的工作示例



你只需要在PHP中替换它。

 <？php 
 $ parent = array（Name ，地点，动物）; 
 foreach（$ parent as $ id => $ name）
 echo'< option value =s'，$ id，'>'，$ name，'< / option> '
？>

而对于 process.php ：

 <？php 
 $ parent = array（Name，Place，Animals）; 
 $ s0 = array（Praveen，Bill Gates，Steve Jobs）; 
 foreach（$ {$ _ GET [parent]}作为$ id => $ name）
 echo'< option value =''，$ data ['id']，'> ;'，$ data ['name']，'< / option>'
？>


I have two drop down menus where the options are not get from the database.

The first one, lets the user to select a category.

<select name="category">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

The options of the second, are depended from the choice in the first dropdown menu. For example, if the user chooses the First option then the second dropdown will show

<select name="items">
    <option value="3">Smartphone</option>
    <option value="8">Charger</option>
</select>

but when the user change his mind, or select the second option first, then the second dropdown will now show 

<select name="items">
    <option value="1">Basketball</option>
    <option value="4">Volleyball</option>
</select>

My question is how can I achieve this ? Can this be done without using a database?

Thank you!

解决方案

See below to see the Working Example without using a Database.

Working Example Using MySQL Database

If you wanna connect it using Database, yeah, it is surely possible. Consider this table:

CREATE TABLE `contents` (
    `id` INT PRIMARY KEY AUTO_INCREMENT,
    `name` VARCHAR (255),
    `parent` INT DEFAULT 0
);

INSERT INTO `contents` (`name`, `parent`) VALUES
    ('Names', 0),
    ('Places', 0),
    ('Animals', 0),
    ('Praveen', 1),
    ('Bill Gates', 1),
    ('Steve Jobs', 1),
    ('India', 2),
    ('New York', 2),
    ('London', 2),
    ('Singapore', 2),
    ('Cat', 3),
    ('Dog', 3),
    ('Tiger', 3),
    ('Deer', 3)

Table Structure

+----+------------+--------+
| id | name       | parent |
+----+------------+--------+
|  1 | Names      |      0 |
|  2 | Places     |      0 |
|  3 | Animals    |      0 |
|  4 | Praveen    |      1 |
|  5 | Bill Gates |      1 |
|  6 | Steve Jobs |      1 |
|  7 | India      |      2 |
|  8 | New York   |      2 |
|  9 | London     |      2 |
| 10 | Singapore  |      2 |
| 11 | Cat        |      3 |
| 12 | Dog        |      3 |
| 13 | Tiger      |      3 |
| 14 | Deer       |      3 |
+----+------------+--------+

Initial HTML & PHP Code

Now, lets use PHP to first populate the initial <select>:

<?php
    mysql_connect();
    mysql_select_db("contents");
    $result = mysql_query("SELECT * FROM `contents` WHERE `parent` = 0");
    while(($data = mysql_fetch_array($result)) !== false)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>

Now the <select> is ready. With its onchange function, we can fire an AJAX event to get the new <select> with the data provided by the parent <select>.

<select onchange="ajaxfunction(this.value)">
    <!-- Options would have been initially populated here -->
</select>

Now for the jQuery function, you can do this way:

<script type="text/javascript">
    function ajaxfunction(parent)
    {
        $.ajax({
            url: 'process.php?parent=' + parent;
            success: function(data) {
                $("#sub").html(data);
            }
        });
    }
</script>

In the HTML, after the <select>, you need to give another select with an id as sub.

<select onchange="ajaxfunction(this.value)">
    <!-- Options would have been initially populated here -->
</select>
<select id="sub"></select>

Processing PHP Source Code

Finally the source code of process.php:

<?php
    mysql_connect();
    mysql_select_db("contents");
    $result = mysql_query("SELECT * FROM `contents` WHERE `parent` = " . mysql_real_escape_string($_GET["parent"]));
    while(($data = mysql_fetch_array($result)) !== false)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>

Working Example without using a Database

You just need to replace this in the PHP.

<?php
    $parent = array("Name", "Place", "Animals");
    foreach ($parent as $id => $name)
        echo '<option value="s', $id,'">', $name,'</option>'
?>

And for the process.php:

<?php
    $parent = array("Name", "Place", "Animals");
    $s0 = array("Praveen", "Bill Gates", "Steve Jobs");
    foreach (${$_GET["parent"]} as $id => $name)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>

这篇关于首先下拉菜单自动更改第二个下拉列表的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆