如何让一个选择框控制另一个选择框答案

【问题标题】：How to get a select box to control another select box如何让一个选择框控制另一个选择框
【发布时间】：2012-07-03 14:35:00
【问题描述】：

我找不到定义这个的好方法，所以我希望有人能提供帮助。

我有两个选择框（Division 和 Sub-Division）。当用户进来时，他们只看到 Division 选择框。当他们选择一个部门时，子部门选择框会出现在其下方，并且只显示该部门的项目。很像这样。

<select name="divisions">
<option value="1">Div1</option>
<option value="2">Div2</option>
</select>

<select name="subdivisions">
<option value="1" division="1">Sub1</option>
<option value="2" division="1">Sub2</option>
<option value="3" division="2">Sub3</option>
<option value="4" division="2">Sub3</option>
</select>

所以，当我选择分区 1 时，我应该会看到第二个选择框弹出，并且只显示 Sub1 和 Sub2 作为该选择框中的选项。当我选择分区 2 时，第二个选择框应该只显示 Sub3 和 Sub4。我想知道如何使用 PHP 和 javascript 轻松做到这一点。

我正在使用 codeigniter 对该页面进行编码，并且我已经将我的视图发送到 Divisions 和 SubDivisions 对象以及构建选择框所需的数据。我不知道是否必须将这些对象转换为 javascript，但如果可能的话，我想避免这种情况。听起来将我的对象转换为 javascript 数组然后填充选择框会变得太复杂。

【问题讨论】：

可能是一个愚蠢的建议，但您是否尝试过一个简单的if() 语句来检查某个复选框是否被选中？
你试过什么？这是一个非常常见的问题，因此，我无法想象您会很难找到资源来帮助解决这个问题。
第二个select中的数据是否依赖于第一个的值？因此，如果我在第一个框中选择选项 1，第二个框会显示与我选择选项 2 不同的一组选项吗？
您希望用户选择部门并根据他的选择加载细分下拉列表吗？
@Utkanos：我试图将我传递给视图的 codeigniter 对象 ($subdivisions) 并在我的 javascript 中创建一个 PHP 脚本来解析 PHP 对象并将其解析为 javascript 对象。在我看来，这非常非常混乱，并且很容易创建数千行代码来完成应该非常简单的事情。我遇到的问题是我找不到实现我想要的“好”方法。

标签： php javascript codeigniter

【解决方案1】：

所以你问如何做到这一点？抱歉，我在您的帖子中没有看到任何问题。如果您尝试在选择一个复选框时创建条件，则其他人可供使用您可以做一些事情。我最喜欢的是使用 jQuery。

$(document).ready(function(){

 $('#divthatholdssubboxes').hide()

 $('#checkbox').click(function(){
       $('#divthatholdssubboxes').slideToggle('slow');
    });

    });

我通常将所有复选框放在一个 div 中以保存所有内容。这是一个很酷的方法，因为它为您的网站提供了一些动态的图形界面，但仍然可以让您的程序逻辑保持完整。

【讨论】：

所以你是说，与其让一个选择框包含所有次要选项（在我的情况下为子部门），不如为每个细分创建一个新的选择框，并且只隐藏或显示选择那个时候你需要盒子吗？我只是想了解一切，对不起。
不，它仍然是一个主复选框，在 div 中的辅助复选框“divthatholdssubboxes”中始终可见，它最初会被隐藏并在您选中主框时切换

【解决方案2】：

对于第一部分（显示/隐藏分区），您需要使用 javascript 来完成，我会使用 jQuery。

将 onChange 事件监听器附加到选择框http://api.jquery.com/change/
检查选择框http://api.jquery.com/val/的值
使用 val（只读/禁用属性）或 css http://api.jquery.com/css/ 启用/显示细分选择框

对于第二部分，使用 CI 表单助手设置值，您还需要一些逻辑来隐藏细分

http://codeigniter.com/user_guide/helpers/form_helper.html (set_select)

【讨论】：