1

我尝试使用引导程序的下拉菜单，它的工作问题是美观的。：

http://twitter.github.io/bootstrap/javascript.html#dropdowns

我有这个代码：

<div class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Colléctivités <b class="caret"></b></a>
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
     <?php
         foreach ($collectivite as $key => $value) {
              echo '<form method="post" action="wbx.php"><li><button type="submit" class="btn" style="margin:0px;" name="cookie" value='.$value.'>'.$value.'</button>    </li></form>';
         }

      ?>
   </ul>
</div>

没有 PHP：

<div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Colléctivités <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <form method="post" action="wbx.php">
            <li>
                <button type="submit" class="btn" style="margin:0px;" name="cookie" value=heeloWorld.net>world.net</button>
            </li>
        </form>                    
    </ul>
</div>

但结果非常基本......不是很好。我使用按钮是因为我用表单提交了一些数据 所以如果我想要这样的东西，我该怎么办？

在此处输入图像描述

编辑解决方案

我用这个：警报没问题，我有很好的价值，但提交不起作用。

<?php
    foreach ($collectivite as $key => $value) {
        $name = preg_replace('#[^0-9a-z]+#i', '', $value);
        echo '<form method="post" action="wbx.php" id='.$name.'>
            <input type="hidden"  name="cookie"   value='.$value.'>
        </form>';
    }
?>
<div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Colléctivités <b     class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <?php
            foreach ($collectivite as $key => $value) {
                    $name = preg_replace('#[^0-9a-z]+#i', '', $value);

                    echo '<li>
                        <input type="hidden"  name="cookie"   value='.$value.'>
                        <a class="myformlink" data-formname="#'.$name.'" >'.$value.'</a>
                    </li>';
            }

        ?>
    </ul>
</div>
<script type="text/javascript">
        $(document).ready(function() {
        $('.myformlink').click(function(){
            $($(this).data('formname')).submit();
        });
    });
</script>
4

1 回答 1

1

您不必使用按钮来提交表单。您可以使用常规锚来执行此操作。请检查这个链接：我想要一个锚应该像输入类型提交按钮

这样，您的下拉列表将看起来像您示例中的下拉列表。

希望能帮助到你 ：）

编辑：在法语中，我们写“Collectivités”；）只是开玩笑......

编辑：具有数据属性的代码示例

<div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Colléctivités <b     class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <form method="post" action="wbx.php" id="formGujanMestras">
            <li>
                <a class="myformlink" id="linkC" data-formname="#formGujanMestras">value1</a>
            </li>
        </form>
        <form method="post" action="wbx.php" id="formLaHume">
            <li>
                <a class="myformlink" id="linkD" data-formname="#formLaHume">value2</a>
            </li>
        </form>
    </ul>
</div>
<script type="text/javascript">
        $(document).ready(function() {
        $('.myformlink').click(function(){
            alert('hey martial i gonna submit ' + $(this).data('formname'));
            $($(this).data('formname')).submit();
        });
    });
</script>
于 2013-07-17T13:28:13.320 回答