Question

我想构建一个表单来向Google，Bing等不同的搜索引擎提交查询... 我遇到了bootstrap分段按钮，现在我想知道在通过搜索按钮提交表单之前，是否可以通过这些分段按钮设置动作（搜索引擎），名称，占位符和可能隐藏的输入。

它应该以两种方式工作：

输入查询 - ＆gt;通过下拉菜单设置搜索引擎 - ＆gt;点击搜索按钮提交通过下拉菜单设置搜索引擎 - ＆gt;输入查询 - ＆gt;点击搜索按钮提交

我的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Damion' rel='stylesheet' type='text/css'>
    <!-- Latest compiled and minified CSS -->
    <!--link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/lumen/bootstrap.min.css"-->
    <link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/paper/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
    <!-- Optional: Include the jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <!--meta name="viewport" content="width=device-width, initial-scale=1"-->
</head>
<body>



    <form id="search" name="search" class="bs-example bs-example-form" onreturn="setSubmit()" action="" role="form" method="" target="_blank">
     <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="DuckDuckGo" name="q" type="text" maxlength="255" value="">
                <div class="input-group-btn">
                    <button tabindex="-1" class="btn btn-default" type="submit">Go!</button>
                    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu pull-right">
                        <li><a onclick="setSubmitDuckDuckGo()">Action</a></li>
                        <li><a onclick="setSubmitGoogle()">Another action</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    </form>

现在我知道，我需要JS来改变上面提到的值。到目前为止，这是我的代码：

<script type="text/javascript">
    function setSubmitDuckDuckGo() {
        $('#search').attr('target','_blank')
        $('#search').attr('action','https://www.duckduckgo.com/')
        $('#search').submit()

        function setSubmitGoogle() {
            $('#search').attr('target','_blank')
            $('#search').attr('action','https://www.google.com/')
            $('#search').submit() 
        }
</script>
</body>
</html>

我希望有人能给我一些暗示并告诉我如何做到这一点。

非常感谢。

Answer 1

答案：可能。

Javascript onclick在这种情况下不起作用。更好地使用href="#"

<ul class="dropdown-menu pull-right">
    <li><a href="#">DuckDuckGo</a></li>
    <li><a href="#">Google</a></li>
</ul>

和jQuery .click()。

$('.dropdown-menu li a').click(function(e) {
    e.preventDefault();
    setupForm($(this).text());
});

我已为您实施了JSFiddle，并已实施setupForm()，您可以在其中设置操作，占位符，隐藏输入等。

使用JavaScript和Bootstrap分段按钮在下拉列表中更改表单操作和输入值

1 个答案: