如何使用悬停单击菜单将文本文件读入文本框?

时间:2018-10-23 15:02:08

标签: javascript html css

我正在尝试转换当前的下拉菜单实现以支持悬停单击界面。在下拉解决方案中,选择了一个项目后,将使用本地文件的内容自动填充一个文本框。这是一个简单的示例:-

    <select id="selectedBaseRelease">
        <script>
            var currentBaseValue;
            $("#selectedBaseRelease").load("~/BaseReleaseMenuNoTs.html", function() {
                currentBaseValue = $(this).val();
                loadbaseText(currentBaseValue);
            });
        </script>
    </select>

...其中BaseReleaseMenuNoTs.html看起来就像:-

 <option value="~/releases/O-2018.06/O-2018.06-SP2.AppOps.public">ICC2_O-2018.06-SP2</option>
 <option value="~/releases/O-2018.06/O-2018.06-SP1.AppOps.public" selected >ICC2_O-2018.06-SP1</option>
 <option value="~/releases/O-2018.06/O-2018.06.AppOps.public">ICC2_O-2018.06</option>

...,然后将所选文件的内容读入textInput分隔符,如下所示:-

    <div class="textInput spacer">
        <h2>Release #1 App Option Defaults</h2>
        <textarea class="textbox" id="baseText"></textarea>
        <script>
            var currentBaseValue = $('#selectedBaseRelease').val();
            loadbaseText(currentBaseValue);
        </script>
    </div>

...它就像一个魅力。但是,如果我尝试切换到这样的悬停点击界面:-

    <nav id="main_nav">
        <ul>
            <li>
                <a>ICC2</a>
                <ul>
                    <li>
                        <a>O-2018.06</a>
                        <ul>
                            <li><a>SP1</a></li>
                            <li>
                                <a>SP1-T</a>
                                <ul>
                                    <li><a>Jun 29, 2018</a></li>
                                    <li><a>Aug 29, 2018</a></li>
                                            <select id="selectedBaseRelease">
                                                <script>
                                                    var currentBaseValue;
                                                    $("#selectedBaseRelease").load("~/releases/O-2018.06/O-2018.06-SP2-T.AppOps.public.hidden", function() {
                                                        currentBaseValue = $(this).val();
                                                        loadbaseText(currentBaseValue);
                                                    });
                                                </script>
                                            </select>
                                </ul>
                            </li>
                            <li><a>Base</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

...需要进行哪些更改才能将选定的“ 2018年8月29日”文件读入textInput分隔符?当前,当我选择“ 2018年8月29日”时,什么也不会发生。我要改进的下拉菜单界面在这里:-

https://jsfiddle.net/e4bunLvh/68/

...但是并非所有支持文件都可用,因此不能通过JSFiddle 100%起作用。

0 个答案:

没有答案