Question

我不做很多Javascript / HTML编码，所以请原谅新手问题。去年，我整理了一个页面，比较信息表并在新的可搜索表中输出差异。通过下拉菜单选择填充两个文本框后，将进行操作的比较部分。（例如，用户选择一个选项，然后将与该选项关联的文件读入文本框。）

一切都按照我的意愿进行。当我整理原始实施时，stackoverflow.com的贡献帮助了我。现在，我希望能得到更多帮助：我想用悬停菜单界面代替下拉/选择/填充文本框操作，但是事实证明，它比我想象的要难。

以下是填充所述文本框的关键代码段：-

<script type="text/javascript">
    function loadbaseText(value) {
        $(document).ready(function() {
            $('#baseText').empty().append(value);
            $('#selectedBaseRelease').on('select2:select', function(event) {
                var value = $('#selectedBaseRelease').val();
                $('#baseText').empty().load(value);
            });
            $('#baseText').empty().load(value);
        });
    }
</script>

<script>
    var currentBaseValue;
    $("#selectedBaseRelease").load("/~ckennedy/BaseReleaseMenuNoTs.html", function() {
        currentBaseValue = $(this).val();
        loadbaseText(currentBaseValue);
    });
    document.querySelector("#include_Ts").addEventListener("change", function(event) {
        if (document.getElementById("include_Ts").checked === true) {
            $("#selectedBaseRelease").load("/~ckennedy/BaseReleaseMenuWithTs.html", function() {
                currentBaseValue = $(this).val();
                loadbaseText(currentBaseValue);
            });
        } else {
            $("#selectedBaseRelease").load("/~ckennedy/BaseReleaseMenuNoTs.html", function() {
                currentBaseValue = $(this).val();
                loadbaseText(currentBaseValue);
            });
        }
    });
</script>

<div class="textInput spacer">
    <h2>Release #1 App Option Defaults</h2>
    <textarea class="textbox" id="baseText"></textarea>
    <script>
        var currentBaseValue = $('#selectedBaseRelease').val();
        loadbaseText(currentBaseValue);
        document.querySelector("#selectedBaseRelease").addEventListener("change", function(event) {
            var currentBaseValue = $('#selectedBaseRelease').val();
            if (document.getElementById("hidden_cb").checked === false) {
                loadbaseText(currentBaseValue);
            } else if (document.getElementById("hidden_cb").checked === true) {
                var currentBaseValue = currentBaseValue+'.hidden';
                loadbaseText(currentBaseValue);
            }
        });
        document.getElementById("hidden_cb").addEventListener("click", function(event) {
            var currentBaseValue = $('#selectedBaseRelease').val();
            if (document.getElementById("hidden_cb").checked === true) {
                var currentBaseValue = currentBaseValue+'.hidden';
                loadbaseText(currentBaseValue);
            } else if (document.getElementById("hidden_cb").checked === false) {
                loadbaseText(currentBaseValue);
            }
        });
    </script>
</div>

最后，我只需要获取loadbaseText即可使用新的悬停菜单界面。我尝试这样做：-

<li>
    <a>SP2-T</a>
    <ul>
        <li><a>Oct 15, 2018</a></li>
        <li><a>Aug 30, 2018</a></li>
            <select id="selectedBaseRelease">
                <script>
                    var currentBaseValue;
                    $("#selectedBaseRelease").load("/~ckennedy/releases/O-2018.06/O-2018.06-SP2-T.AppOps.public.hidden", function() {
                        currentBaseValue = $(this).val();
                        loadbaseText(currentBaseValue);
                    });
                </script>
            </select>
    </ul>
</li>

...但是什么也没发生。

有人对我有什么建议吗？如何以与原始实现相同的方式使loadbaseText与悬停菜单界面一起使用？

如何用多级悬停菜单选择替换单级下拉菜单选择

0 个答案: