将表单数据中的dropdwon所选列表项发送到服务器

时间:2018-09-09 23:45:21

标签: javascript html

如何在按下提交按钮时将所选的下拉列表项与表单数据一起发送到服务器?

html

<span class="dropdown" >
            <button class="btn btn-default dropdown-toggle" name="ops" type="button" id="menu2" data-toggle="dropdown">Select Condition
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu"   role="menu" aria-labelledby="menu1" >
                <li  role="presentation"><a role="menuitem" tabindex="-1" href="#">Not Equals</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Equals</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Greater Than</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Less Than</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contains</a></li>
            </ul>
        </span>

1 个答案:

答案 0 :(得分:0)

最简单的方法是隐藏输入,然后将下拉选项的值传递给它!查看我的代码:

<html>
<head>
    <title>12328354/calling-a-particular-php-function-on-form-submit</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post" action="stacksubmit.html">
    <span class="dropdown" >
        <button class="btn btn-default dropdown-toggle" name="ops" type="button" id="menu2" data-toggle="dropdown">Select Condition
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu"   role="menu" aria-labelledby="menu1" name="dropdown">
            <li  role="presentation"><a role="menuitem" tabindex="-1" href="#">Not Equals</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Equals</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Greater Than</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Less Than</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contains</a></li>
        </ul>
        <input type="hidden" name="optionvalue" id="optionvalue">
    </span>
    <input type="submit" value="click">
</form>
<script>
  $('.dropdown-menu a').click(function(){
    $('#optionvalue').val($(this).text());
  });
</script>

</body>

</html>