Combobox项目基于另一个组合框中的选定项目

时间:2011-12-03 19:48:30

标签: php html combobox

如果我有一个combobox1有项目:Fruits&蔬菜。

我需要根据combobox2中的所选项目显示标记combobox1

如果combobox1中的所选项目为Fruits,则combobox2项为:apple,orange ..等。

如果combobox1中的所选项目为vegetables,则combobox2项目为:萝卜,生菜等。

我怎样才能使用PHP& HTML? ( 请将“PHP& HTML only”视为条件 )。

3 个答案:

答案 0 :(得分:3)

不幸的是,您的条件(仅限PHP和HTML,而不是javascript)意味着您应该在组合框上的每次更改后重新加载页面/加载另一个页面并提交表单,因为这将是您了解什么是唯一的方法选择的值,因为您决定只使用服务器端(PHP)。

如果您决定不利用javascript(或jQuery等javascript框架),您将无法在未提交表单的情况下修改页面中的内容,因此您将无法更改第二个组合框元素如果你没有提交第一个组合框选择。

答案 1 :(得分:2)

你可以这样做:

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#combo').change(function(){
                    console.log($(this));
                    $.get( "ABC.php" , { option : $(this).val() } , function ( data ) {
                        $ ( '#comboB' ) . html ( data ) ;
                    } ) ;
                });
            });
        </script>
    </head>
    <body>
        <div id="comboBox">
            <fieldset>
                <form>
                    <select name="combo" id="combo">
                        <option value="">-- Select</option>
                        <option value="1">Fruits</option>
                        <option value="2">Vegetables</option>
                    </select>
                    <select name="comboB" id="comboB">
                        <option value="">--</option>
                    </select>
                </form>
            </fieldset>
        </div>
    </body>
</html>

然后在PHP页面中,你得到一个数组,其中包含要添加到下拉框的数据,当然你还必须发送一个ajax调用来填充下拉框,然后在php页面中,你有以下内容:

<?php
    $Options = Array ( 
        1 => Array ( 
            'Apple' ,
            'Orange'
        ) , 
        2 => Array ( 
            'Radish' ,
            'Lettuce'
        )
    ) ; 

    forEach ( $Options [ $_GET [ 'option' ] ] as $Item ) {
        printf ( '<option value="%s">%s</option>' , $Item , $Item ) ;
    }

现在,您只需要调整验证等等。

答案 2 :(得分:1)

您可以使用jquery

执行此操作

例如:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" ></script>

<select class="small-input" id="NameCombobox1" name="NameCombobox1">                            
    <option value="0">Select one</option>
    <option value="1">Fruits</option>
    <option value="2">vegetables</option>
</select>

<div id="result"></div>

<script type="text/javascript">

 $('#NameCombobox1').change(function() 
    {                                   
    var NameCombobox1 =  $(this).attr('value'); 

    if( NameCombobox1> 0) {
    $.post(
    "PageWithSelect.php", 
    { BRFLink:  NameCombobox1 },
    function(data) {                                                        
        $("#result").append(data);          
    }, 
     "html"
    );
    }
    $('#result').show();
  });

</script>