第一个下拉菜单，自动更改第二个下拉菜单的选项

时间：2012-06-28 04:03:54

标签： php javascript jquery html

我有两个下拉菜单，其中的选项无法从数据库中获取。

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

<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>

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

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

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

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

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

谢谢！

8 个答案:

答案 0 :(得分：15)

请参阅下文，了解不使用数据库的工作示例。

使用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 | 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 |
+----+------------+--------+

初始HTML＆amp; 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>。

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

现在对于jQuery函数，你可以这样做：

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

在HTML中，在<select>之后，您需要将另一个select与id作为sub。

<select onchange="ajaxfunction(this.value)">
    <!-- Options would have been initially populated here -->
</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", "Place", "Animals");
    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"]} as $id => $name)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>

答案 1 :(得分：5)

关于数据库的部分并不是很清楚，因为选择可能会以某种方式被“列出”。如果您使用其他格式，这是有意义的，或者如果您询问是否需要回拨数据库（postback），答案是否定的。但目前尚不清楚你的意思。

无论如何，您可以使用rel=""值（或data-items=""）来设置一个选择与另一个之间的关系。

例如：

<强> CSS 

.cascade {
    display: none;
}

HTML - 已修改 

<select name="category">
    <option value="0">None</option>
    <option value="1" rel="accessories">Cellphones</option>
    <option value="2" rel="sports">Sports</option>
    <option value="3" rel="cars">Cars</option>
</select>
<select name="items" class="cascade">
    <option value="3" class="accessories">Smartphone</option>
    <option value="8" class="accessories">Charger</option>
    <option value="1" class="sports">Basketball</option>
    <option value="4" class="sports">Volleyball</option>
    <option value="6" class="cars">Corvette</option>
    <option value="2" class="cars">Monte Carloe</option>
</select>

<强>的jQuery 

$(document).ready(function(){
    var $cat = $('select[name=category]'),
        $items = $('select[name=items]');

    $cat.change(function(){
        var $this = $(this).find(':selected'),
            rel = $this.attr('rel'),
            $set = $items.find('option.' + rel);

        if ($set.size() < 0) {
            $items.hide();
            return;
        }

        $items.show().find('option').hide();

        $set.show().first().prop('selected', true);
    });
});

http://jsfiddle.net/userdude/bY5LF/

答案 2 :(得分：4)

这是另一个例子，基本上所有数据都在对象的页面上，你用它来显示不同的类别FIDDLE 

var categories = {
    "None":[{value:'3', text:'No cataegory selected'}],
    "First":[{value:'1', text:'Bmw'},{value:'2', text:'Benz'}],
    "Second":[{value:'4', text:'Playstation'},{value:'5', text:'Xbox'},{value:'10', text:'Wii'}],
    "Third":[{value:'6', text:'Dell'},{value:'7', text:'Acer'}],
    "Fourth":[{value:'8', text:'Audi'},{value:'9', text:'Datsun'}]
};
function selectchange(){
    var select = $('[name=items]');
    select.empty();
    $.each(categories[$(':selected', this).text()], function(){
        select.append('<option value="'+this.value+'">'+this.text+'</option>');
    });
}
$(function(){
    $('[name=category]').on('change', selectchange);
});

答案 3 :(得分：1)

2代码的工作演示 :) http://jsfiddle.net/PnSCL/2/ 或 http://jsfiddle.net/PnSCL/

这是可以实现的，但你需要在第一和第二选择之间建立关系。

请在此处查看：http://api.jquery.com/data/

我在这里添加了label关系http://jsfiddle.net/PnSCL/2/ [http://www.w3schools.com/tags/tag_option.asp]

行为当您从select1中选择first选项时，它会显示smartphone, chargers，否则当用户从select1中选择second时，它会显示{{1}在select2中。

希望这会有所帮助，如果我错过任何事情，请告诉我。

演示1

<强>代码 

baskeball, voleyball

<强> HTML 

$("#category").change(function() {
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select2 option').clone());
    }
var id = $(this).val();
var options = $(this).data('options').filter('[label=' + id + ']');
$('#select2').html(options);
   // alert(options);
});

DEMO 2 * 码 * 

<select name="select1" id="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>

<select name="items" id="select2">

    <option value="3" label="1">Smartphone</option>
    <option value="8" label="1">Charger</option>

    <option value="1" label="2">Basketball</option>
    <option value="4" label="2">Volleyball</option>
</select>

<强> HTML 

$("#category").change(function() {
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select2 option').clone());
    }
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
    alert(options);
});

答案 4 :(得分：1)

不使用任何数据库的工作解决方案：

<强> HTML 

<select name="country" id="country" onChange="showState();">   
    <option value="">Select Country</option>
    <option value="1">Pakistan</option>
    <option value="2">Saudi Arabia</option>
</select>

<div id="div_state"></div>

<强> Jquery的 

<script>
    function showState()
    {
        $('body').css('cursor','wait');
        var value = document.getElementById('country').value;
        var url = 'http://fiddle.jshell.net/rathoreahsan/WcKQ2/4/show/';

        $.ajax({
            type: "GET",
            url: url,
            data:{'country':value},
            success:function(results)
            {              

                $('#div_state').html(results);

                if (value == "1") 
                {
                    $('#PK').css('display','block')                
                } 

                else if (value == "2") 
                {
                    $('#SA').css('display','block')                        
                }

                $('body').css('cursor','default');            

            }
        });
    }
</script>

<强> CSS： 

#PK, #SA { display: none; }

查看演示 http://jsfiddle.net/rathoreahsan/WyLsh/

州Page： http://fiddle.jshell.net/rathoreahsan/WcKQ2/4/show/

答案 5 :(得分：0)

以下是一个非常简单的完整示例：

外部URL将向我们发送选项列表，然后使用jquery $（selector）.html（）方法将该下拉列表分配给第二个下拉菜单。

setup.cfg

Full Demo

答案 6 :(得分：-1)

建议你如何做到 - 

<select name="country" id="country" onChange="showState();" >
<option value="">Select Country</option>
<option value="1">India</option>
<option value="2">Nepal</option>
</select>

你的脚本 - 

<script type="text/javascript">
function showState( )
{
var value = document.getElementById('country').value;
var url = '<?php echo base_url ?>showstate.php';
$.ajax({
type: "GET",
url: url,
data:{'country':value},
success:function(results)
{   
    $('#div_state').html(results);
}
});
}
</script>

您的showstate.php php页面 - 

//INCLUDE CONNECTION file to for db query
$type = $_GET['country'];

//Your DB QUERIES
//Your data on Get condition
/*USING SWITCH--
switch ($type) {
case "India":
    echo "I m in India";
    break;
case "Nepal":
    echo "I am in Nepal";
    break;

这将加载#div_state div中的内容。你也可以使用Jquery为此......我想这会对你有所帮助:)如果你有任何疑问，请告诉我。

答案 7 :(得分：-2)

$(document).ready(function(){
    $('#causes').change(function(){

         $.getJSON("<?=URL.$param->module."/".$param->controller?>/getcourtcauses",{causeId:  $(this).val()}, function(j){ 

        var options = '';
        if(j.length > 1 )
        {
            for (var i = 0; i < j.length; i++) {
                options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
            }
            if($('#subcauses').hide())
                {
                    $('#subcauses').show();
                }
                $('#subcauses').attr('disabled', false);
            $("#subcauses").html("");
            $("#subcauses").html(options);
         }
        else
            {
                $('#subcauses')
                    .find('option')
                    .remove()
                    .end();
                 $('#subcauses').attr('disabled', true);
            }
        });
相关问题
最新问题