根据其他DropDownList中的选定值填充第二个DropDownList

Question

I'm trying to link two dropdownlist depending on the value you select from the first dropdownlist. 我试图链接两个下拉列表，具体取决于您从第一个下拉列表中选择的值。 I don't have any idea how to do this, so if you guys can point me in the right direction that would be great. 我不知道该怎么做，所以如果你们能指出我正确的方向，那就太好了。

What I want to do is select a value from the first dropdownlist and depending on its value show some options in the second dropdownlist. 我想做的是从第一个下拉列表中选择一个值，然后根据其值在第二个下拉列表中显示一些选项。

I try doing this: 我尝试这样做：

1-when the “OnChange” event of the first dropdownlist occurs, I call a javascript that redirects to a method in a controller (for example: index/mainController/firstMethod/selectedValue). 1-当第一个下拉列表的“ OnChange”事件发生时，我调用了一个javascript，该javascript重定向到控制器中的方法（例如：index / mainController / firstMethod / selectedValue）。

2-the method in the controller using the url helper extracts the “selectedValue” to do a database search of the value of the second dropdownlist. 2-控制器中使用url帮助器的方法提取“ selectedValue”以对第二个下拉列表的值进行数据库搜索。

3-the same method loads the view (the one that have the ddl) 3-相同的方法加载视图（具有ddl的视图）

Doing this I lose the selected value of the first ddl. 这样做会丢失第一个ddl的选定值。

I think this is not the right way to do it. 我认为这不是正确的方法。

So, once again, I need some help. 因此，我再次需要一些帮助。

Answer 1

It sounds like you want AJAX. 听起来您想要AJAX。 I'm not as up on this as I used to be, but the general procedure should go something like this: 我现在不像以前那样忙了，但是一般的过程应该是这样的：

When the user selects something in the first dropdown, it fires a javascript method. 当用户在第一个下拉列表中选择内容时，它会触发javascript方法。 This method grabs that value, uses it to GET query a page via a XMLHttpRequest. 此方法获取该值，并使用它通过XMLHttpRequest GET查询页面。 The XMLHttpRequest has a callback, such that when the data comes back, you can populate the second dropdown with that data. XMLHttpRequest有一个回调，这样当数据返回时，您可以用该数据填充第二个下拉列表。

It's probably easiest (although somewhat odd) to have the PHP page that it calls just return the full HTML for the new dropdown. 让它调用的PHP页面仅返回新下拉列表的完整HTML可能是最容易的（尽管有些奇怪）。 They you just have to do something like document.getElementById('secondDropdown').innerHTML = requestContent; 他们只需要执行诸如document.getElementById('secondDropdown').innerHTML = requestContent; . 。

Answer 2

It's easier if you use jQuery . 如果使用jQuery会更容易。

Here is an example. 这是一个例子。

In the main view you would have some like this: 在主视图中，您将具有以下内容：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script>
    $('#dropdown1').change(function(e) {
        $('#dropdown2').load('some_controller/some_function/'+this.value);
    });
</script>

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

<select name="dropdown2" id="dropdown2"></select>
</body>

You are saying in the script that whenever the dropdown change its value, you call (in Ajax) a controller function with the id in its arguments. 您在脚本中说的是，只要下拉列表更改其值，就调用（在Ajax中）参数为id的控制器函数。 Don't forget to include jQuery file. 不要忘记包含jQuery文件。

In the controller, you would have this: 在控制器中，您将具有以下内容：

<?php
class some_controller extends Controller {

    function some_function($id) {
        $this->load->model('some_model');
        $data['options'] = $this->some_model->get_options($id);
        echo $this->load->view('view_dropdown2', $data, true);
    }
}
?>

So, when this function is called, you call your model function with the dropdown id, and you echo the view with the options. 因此，在调用此函数时，将使用下拉列表ID调用模型函数，并使用选项回显视图。 You have to put the 3rd argument true, so that the view is returned as a var and not rendered. 您必须将第3个参数设置为true，以便将视图作为var返回而不进行渲染。

And in the view: 并在视图中：

<?php foreach($options->result() as $option): ?>
    <option value="<?php echo $option->id; ?>"><?php echo $option->title; ?></option>
<?php endforeach; ?>

You are just creating the options tags because the select tag was already created in the main view. 您正在创建options标签，因为select标签已经在主视图中创建。

根据其他DropDownList中的选定值填充第二个DropDownList

问题描述

2 个解决方案

解决方案1
0 2010-06-23 22:01:44

解决方案2
0 2010-06-24 16:59:02

根据其他DropDownList中的选定值填充第二个DropDownList

问题描述

2 个解决方案

解决方案1 0 2010-06-23 22:01:44

解决方案2 0 2010-06-24 16:59:02

解决方案1
0 2010-06-23 22:01:44

解决方案2
0 2010-06-24 16:59:02