用javascript / jquery替换选择输入

Question

I have a page with a form where I have 2 selections, and when you select value X on the first selection, it will change the second selection.
I tried doing this with:

<script language="JavaScript" type="text/JavaScript">
function makeRequestObject() {
    var xmlhttp = false;
    try {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        } catch (E) {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function replace2(id) {
    var xmlhttp = makeRequestObject();
    var file = 'http://example.com/index.php/result/new_select/'
    xmlhttp.open('GET', file + id, true);
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var content = xmlhttp.responseText;
            if (content) {
                document.getElementById('replace').innerHTML = content;
                //$( "div.test" ).replaceWith(content);
            }
        }
    }
    xmlhttp.send(null)
}
</script>

And in the form I have this:

<th id="replace">
    <?php
    $fruit_options = array();
    $fruit_options[-1] = 'Select ALL';
    foreach ($tests as $fruit) {
        $fruit_options[$fruit->ID] = $fruit->Nume;
    }
    echo form_dropdown('test', $fruit_options, $fruit->ID, $fruit->Nume);
    ?>
</th>

Everything works, when I select the first dropdown, the second selection will be modified (I call it with: echo form_dropdown('test1', $fruit_options, -1, 'onchange="replace2(this.value)"');)

But when I press "Submit", the controller will not see the value of post test.

In result/new_select/id I have something like this:

<?php
$fruit_options = array();
$fruit_options[-1] = 'Select ALL';
foreach ($tests as $fruit) {
    $fruit_options[$fruit->ID] = $fruit->Nume;
}
echo form_dropdown('test', $fruit_options, $fruit->ID, $fruit->Nume);
?>

Does anybody know why my code doesn't work, or what a better way to do this would be?

LE

        <form action="http://example.com/index.php/test/query" method="post" accept-charset="utf-8">    
<table>                    
        <th>
            <select name="test1" onchange="replace2(this.value)">
                <option value="-1" selected="selected">Select ALL</option>
                <option value="515">515</option>
                <option value="252">252</option>
                <option value="327">327</option>
                <option value="409">409</option>
            </select>                        
        </th>
        <th id="replace">
            <select name="test" 315>
                <option value="-1">Select ALL</option>
                <option value="1">1</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="315" selected="selected">315</option>
            </select>                        
        </th>
        <th>
            <input type="submit" name="mysubmit" value="Search!"  />                            
        </th>
</table>
    </form>  

In controller i see value for test1 but i can't see value of test.

Answer 1

The problem here seems to be your table structure. You are forgetting that tables need rows <tr> and columns <td>, therefore when JS appends any HTML, it places them outside the form thus your form request not sending the right POST info.

Restructure your table like this:

<form method="post">
    <table>
        <tr>
            <td>
                <?php
                $fruit_options = array();
                $fruit_options[-1] = 'Select ALL';
                foreach ($tests as $fruit) {
                    $fruit_options[$fruit->ID] = $fruit->Nume;
                }
                echo form_dropdown('test1', $fruit_options, -1, 'onchange="replace2(this.value)"');
                ?>
            </td>
        </tr>
        <tr>
            <td id="replace">
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit"/>
            </td>
        </tr>
    </table>
</form>