douzhanglu4591 2014-08-28 11:17
浏览 321
已采纳

下拉菜单选项会显示将显示的表单

I'm currently working on a project that saves details of different types of objects to a database e.g. book, webpage and journal article. To save the different attributes of these objects I am trying to get different forms to display that depend on the selection in a drop down menu.

Here's the dropdown menu:

<div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
            Select Reference Type...
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="book.php">Book</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="journal.php">Journal</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="webpage.php">Webpage</a></li>
        </ul>
    </div>

How to I get a different form to load on screen without redirecting to a different page. I've been trying to do this in php but I get the feeling that php isn't the right way of going about doing this. Also, apologies in advance as I have no previous experience in Javascript, AJAX or jQuery.

  • 写回答

3条回答 默认 最新

  • dthdlv9777 2014-08-28 11:36
    关注

    Okay, so without knowing the rest of your code, I would suggest that the best option would be to have the different forms in separate documents. For example

    HTML

    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
            Select Reference Type...
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a onclick="bookinclude()" role="menuitem" tabindex="-1" href="book.php">Book</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="journal.php">Journal</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="webpage.php">Webpage</a></li>
        </ul>
    </div>
    <div id="contentwrapper">
        Some Initial Content Here
    </div>
    

    Javascript

    function bookinclude(){
      $("#contentwrapper").fadeOut(400);
      setTimeout(function(){$("#contentwrapper").load("book.php").fadeIn();}, 400); 
    };
    

    And remember to include Jquery!In the head of your HTML:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    

    Basically, on the click of the book link, it will load the book.php into the contentwrapper div.

    I think this is what you want? All you need to do is replicate the function, and the link, but replace the book with journal, and with webpage.

    Hope this helps!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)