如何更新另一个下拉列表的下拉列表并使用AJAX和JavaScript保存它

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>