基于另一个组合框中的选定项的组合框项 - Combobox items based on selected item in another combobox

Combobox items based on selected item in another combobox

本文关键字：组合另一个 | 更新日期: 2023-09-27

如果我有一个combobox1有以下项目:水果&蔬菜。

我需要根据combobox1中选定的项目显示另一个combobox2。

如果combobox1中选择的项目为Fruits，则combobox2项目为:苹果、橘子等

如果combobox1中选择的项目为vegetables，则combobox2中的项目为:萝卜、生菜等

如何使用PHP &HTML ?(请考虑"PHP &

不幸的是你的条件(PHP &只有HTML，而不是javascript)意味着您应该在每次更改组合框后重新加载页面/加载另一个带有表单提交的页面，因为这将是您了解所选值的唯一方法，因为您决定仅在服务器端(PHP)工作。

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

你可以这样做:

<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 ) ;
    }

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

可以使用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>