Question

我一直在使用CodeIgniter重建我的网站。我目前正在进行注册页面，并且正在寻找最有效/最具战略性的方式来实现动态下拉。这是囊性纤维化社区的社交网络。话虽如此，在注册时有一个下拉，询问你与CF的关系。

有两种选择：1。我有CF和2.我认识的人有CF.我想要选择1.当一个新的下拉列表显示选项，并且相同的选项为2。

这是控制器代码：

function relation_dropdown($relation="relation", $top_relations=array()) {
    $relations = array(
            "choose"=>"Choose One",
            "I have CF"=>"I have CF",
            "Someone I know has CF"
    );

    $html = "<select name='{$relation}'>";
    if(!empty($top_relations)){
        foreach($top_relations as $value){
            if(array_key_exists($value, $relations)){
                $html .="<option value='{$value}'>{$relations[$value]}</option>";
            }
        }
        $html .="<option>----------</option>";
    }
    foreach($relations as $key => $relation){
        $html .="<option value='{$key}'>{$relation}</option>";
    }
    $html .="</select>";
    return $html;

}

和视图上的表单：

<div id="signup_form">
    <?php
        echo validation_errors(); 
        echo form_open('general/send?');
        echo "<div class='form_text'>First Name</div>";
        echo form_input('first_name');
        echo "<div class='form_text'>Last Name</div>";
        echo form_input('last_name');
        echo "<div class='form_text'>Email</div>";
        echo form_input('email');
        echo "<div class='form_text'>Confirm Email</div>";
        echo form_input('confirm_email');
        echo "<div class='form_text'>Password</div>";
        echo form_input('password');
        echo "<div class='form_text'>Confirm Password</div>";
        echo form_input('confirm_password');
        echo "<div class='dropdown_structure'>";
        echo "<div class='form_text'>";
        echo "Location";
        echo "</div>";
        echo country_dropdown('country');
        echo "</div>";
        echo "<div class='dropdown_structure'>";
        echo "<div class='form_text'>";
        echo "Relation To CF";
        echo "</div>";
        echo relation_dropdown('relation');
        echo "</div>";
        echo form_close();
    ?>
</div>

所以我的问题是最好的方法是什么？

提前致谢

Answer 1

如果您有多个用户必须做出的决定，我会在数据库中创建一个查找表，并在选择选项中使用父子关系。这样，您可以将ajax与jquery一起使用，并选择当前所选选项的子项。所以，基本上，我会这样做：

用户选择“我有CF”
Ajax从数据库表中获取“I Have CF”选项的所有子项
jQuery获取这些选项，并显示下一个下拉列表。
冲洗并重复直至做出所有决定

Answer 2

你可以：

使用ajax在第一个下拉列表更改时获取选项这需要第二个控制器返回第二个下拉列表的数据（以HTML，JSON或任何你想要的方式）和JQuery / JS将它们连接在一起。如果有很多选项并且你不想在前面加载它们，那就很好。
输出初始页面加载的所有选项这允许您只使用JQuery / JS来更新第二个下拉列表。初始页面加载中的数据可以是Javascript数组或隐藏的HTML元素。这很容易，但会增加初始下载，特别是如果您有很多选项。

以下示例将初始页面中的选项加载为隐藏的HTML元素：

<select id="dropdown1" name="dropdown1">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

<select id="dropdown2" name="dropdown2" disabled="disabled">
    <option value="">select an option</option>
</select>

<select id="dropdown2a" name="dropdown2a" style="display: none">
    <option value="a">option a</option>
    <option value="b">option b</option>
    <option value="c">option c</option>
</select>

<select id="dropdown2b" name="dropdown2b" style="display: none">
    <option value="i">option i</option>
    <option value="ii">option ii</option>
</select>

<select id="dropdown2c" name="dropdown2c" style="display: none">
    <option value="x">option x</option>
    <option value="y">option y</option>
</select>

<script type="text/javascript">
    $(function()
    {
        $('#dropdown1').change(function(){
            var val = ('#dropdown1').val();

            if (val == 1)
            {
                $('#dropdown2').html($('#dropdown2a').html());
            }
            else if (val == 2)
            {
                $('#dropdown2').html($('#dropdown2b').html());
            }
            else if (val == 3)
            {
                $('#dropdown2').html($('#dropdown2c').html());
            }

            $('#dropdown2').removeAttr("disabled");
        });
    });
</script>

如何在CodeIgniter中进行动态下拉？

2 个答案: