11

我有两个下拉菜单,其中选项不是从数据库中获取的。

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

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

我的问题是我怎样才能做到这一点?这可以在不使用数据库的情况下完成吗?

谢谢!

4

8 回答 8

14

请参阅下文以查看不使用数据库的工作示例

使用 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 和 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>使用 parent 提供的数据获取新的<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 中,在 之后,您需要用as<select>给另一个。selectidsub

<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>'
?>
于 2012-06-28T04:23:25.727 回答
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/

于 2012-06-28T04:40:32.940 回答
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);
});
于 2012-06-28T04:37:00.140 回答
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 ]

行为当您first从 select1 中选择选项时,它将显示,smartphone, chargers否则当用户second从 select1 中选择时,它将显示baskeball, voleyball在 select2 中。

希望这会有所帮助,如果我错过了什么,请告诉我。

演示 1

代码

$("#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);
});

HTML

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

演示 2 *代码*

$("#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);
});

HTML

<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="1">Smartphone</option>
    <option value="1">Charger</option>

    <option value="2">Basketball</option>
    <option value="2">Volleyball</option>
</select>
于 2012-06-28T04:15:20.547 回答
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/

国家页面: http: //fiddle.jshell.net/rathoreahsan/WcKQ2/4/show/

于 2012-06-28T05:04:34.717 回答
0

这是一个非常简单的完整示例:

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

<script type="text/javascript">

    $("#country").on('change',function(){
        var country= $(this).val();

        $.ajax({
            url: 'cities.php' ,
            type: 'POST',
            data: "country="+country,
            success: function(cities)
            {
                $("#cities").html(cities);
            }

        });
    });
</script>  

完整演示

于 2018-12-25T14:13:58.733 回答
-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.phpphp页面——

//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。我认为这会对您有所帮助 :) 如果您有任何疑问,请告诉我。

于 2012-06-28T04:10:00.830 回答
-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);
            }
        });  
于 2013-01-01T10:00:31.437 回答