Question

我以前从未做过AJAX通话...

我有一个页面，其中有两个下拉字段，其中一个向谁发送成绩单，另一个是听力类型。我在听证会的类型中添加了onchange功能，以使将抄录发送到现场，具体取决于所选择的内容。

问题在于，该人可以在保存作业之前选择其他选项，因此，即使您读取了发送到下拉列表的值，即使显示发生了更改，代码中的值也不会更改。我当时在想，也许我需要做一个AJAX调用来保存下拉列表，然后再阅读，但是我被卡住了。我以前从未使用过AJAX。

有很多读取文件或读取文件并使用jQuery的示例，但是我需要使用JavaScript并写入数据库。

这是带有onchange事件的字段：

 echo form_label('Type:', 'hearingtype') . form_dropdown('hearingtype[r]', $hearingtypes, isset($job['hearingtype']) ? $job['hearingtype'] : '', array('onchange' => 'changeEmail($(this));')) . '<br />';

这是应该更改的字段：

echo form_label('Send transcript to:', 'emailkey') .
            form_dropdown('emailkey', $operationsemails, isset($job) ? $job['emailkey'] : '', 'id="emailkey"') . '<br />';

这是JavaScript：

<script type="text/javascript">
    function changeEmail(name) {
        let hearingType = name.value.toString();
        let emailkey = document.getElementById('emailkey').innerHTML;
        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                if (hearingType == 16) {
                    if (emailkey.indexOf('selected="selected">John Doe') > 0) {
                        // All correct
                    } else {
                        // Change and flash green
                        document.getElementById('emailkey').value = '1';
                        document.getElementById('emailkey').setStyle('background-color', 'lightgreen');
                        setTimeout(function() {
                            document.getElementById('emailkey').setStyle('background-color', 'white');
                        }, 250);
                     }
                   } else {
                      if (emailkey.indexOf('selected="selected">Lisa Black') > 0) {
                          // Correct, do nothing.
                      } else {
                          // Change and flash green
                          document.getElementById('emailkey').value = '0';
                                document.getElementById('emailkey').setStyle('background-color', 'lightgreen');
                                setTimeout(function() {
                                    document.getElementById('emailkey').setStyle('background-color', 'white');
                                }, 250);
                            }
                        }
                    }
                };
                xhttp.open('GET', 'test.txt', true);
                xhttp.send();
            }
        </script>

test.txt显然不正确。我对放置在其中要写入数据库的内容感到困惑。我会调用一个函数（$this->functioName）吗？其他一切都工作正常。

我不知道是否还有其他方法可以读取网页上显示的内容，而不是代码中的内容...

Answer 1

如果有人感兴趣，我最终做了以下工作，并使其起作用：

 echo form_label('Type:', 'hearingtype') . form_dropdown('hearingtype[r]', $hearingtypes, isset($job['hearingtype']) ? $job['hearingtype'] : '', array('onchange' => 'changeEmail($(this));')) . '<br />';

并且：

        <script type="text/javascript">
            function changeEmail(name) {
                let hearingType = name.value.toString();
                if (hearingType === '16') {
                    let x = document.getElementById('emailkey');
                    for (let i = 0; i < x.options.length; i++) {
                        let optionValue = x.options[i].innerHTML;
                        if (optionValue.includes('Janet') > 0) {
                            x.options[i].selected = 'selected';
                            document.getElementById('emailkey').setStyle('background-color', 'lightgreen');
                            setTimeout(function() {
                                document.getElementById('emailkey').setStyle('background-color', 'white');
                            }, 250);
                        }
                    }
                } else {
                    let x = document.getElementById('emailkey');
                    for (let i = 0; i < x.options.length; i++) {
                        let optionValue = x.options[i].innerHTML;
                        if (optionValue.includes('Michelle') > 0) {
                            x.options[i].selected = 'selected';
                            document.getElementById('emailkey').setStyle('background-color', 'lightgreen');
                            setTimeout(function() {
                                document.getElementById('emailkey').setStyle('background-color', 'white');
                            }, 250);
                        }
                    }
                }
            }
        </script>

如何在另一个下拉列表更改时更新下拉列表并使用AJAX和JavaScript保存

1 个答案: