根據其他DropDownList中的選定值填充第二個DropDownList

Question

我試圖鏈接兩個下拉列表，具體取決於您從第一個下拉列表中選擇的值。 我不知道該怎么做，所以如果你們能指出我正確的方向，那就太好了。

我想做的是從第一個下拉列表中選擇一個值，然后根據其值在第二個下拉列表中顯示一些選項。

我嘗試這樣做：

1-當第一個下拉列表的“ OnChange”事件發生時，我調用了一個javascript，該javascript重定向到控制器中的方法（例如：index / mainController / firstMethod / selectedValue）。

2-控制器中使用url幫助器的方法提取“ selectedValue”以對第二個下拉列表的值進行數據庫搜索。

3-相同的方法加載視圖（具有ddl的視圖）

這樣做會丟失第一個ddl的選定值。

我認為這不是正確的方法。

因此，我再次需要一些幫助。

Answer 1

聽起來您想要AJAX。 我現在不像以前那樣忙了，但是一般的過程應該是這樣的：

當用戶在第一個下拉列表中選擇內容時，它會觸發javascript方法。 此方法獲取該值，並使用它通過XMLHttpRequest GET查詢頁面。 XMLHttpRequest有一個回調，這樣當數據返回時，您可以用該數據填充第二個下拉列表。

讓它調用的PHP頁面僅返回新下拉列表的完整HTML可能是最容易的（盡管有些奇怪）。 他們只需要執行諸如document.getElementById('secondDropdown').innerHTML = requestContent; 。

Answer 2

如果使用jQuery會更容易。

這是一個例子。

在主視圖中，您將具有以下內容：

<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>

您在腳本中說的是，只要下拉列表更改其值，就調用（在Ajax中）參數為id的控制器函數。 不要忘記包含jQuery文件。

在控制器中，您將具有以下內容：

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

因此，在調用此函數時，將使用下拉列表ID調用模型函數，並使用選項回顯視圖。 您必須將第3個參數設置為true，以便將視圖作為var返回而不進行渲染。

並在視圖中：

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

您正在創建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