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

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

javascript forms twitter-bootstrap-3

使用JavaScript和引导分段按钮在下拉列表中更改表单操作和输入值,javascript,forms,twitter-bootstrap-3,Javascript,Forms,Twitter Bootstrap 3,我想建立一个表单，提交一个查询到不同的搜索引擎，如谷歌，必应等。。。我遇到过引导分段按钮，现在我想知道在表单通过搜索按钮提交之前，是否可以通过这些分段按钮设置操作（搜索引擎）、名称、占位符和可能的隐藏输入它应该在两方面发挥作用：输入查询->通过下拉菜单设置搜索引擎->点击搜索按钮提交通过下拉菜单->输入查询->点击搜索按钮提交设置搜索引擎我的html代码如下： <!DOCTYPE html> <html> <head> <link hr

我想建立一个表单，提交一个查询到不同的搜索引擎，如谷歌，必应等。。。我遇到过引导分段按钮，现在我想知道在表单通过搜索按钮提交之前，是否可以通过这些分段按钮设置操作（搜索引擎）、名称、占位符和可能的隐藏输入

它应该在两方面发挥作用：

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

我的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>


函数setSubmitDuckDuckGo（）{
$（'搜索'）.attr（'目标'，'空白'）
$（'#search'）.attr（'action'，'https://www.duckduckgo.com/')
$（“#搜索”）.submit（）
函数setSubmitGoogle（）{
$（'搜索'）.attr（'目标'，'空白'）
$（'#search'）.attr（'action'，'https://www.google.com/')
$（“#搜索”）.submit（）
}

我希望有人能给我一个提示，告诉我怎么做

非常感谢。

回答：这是可能的。

Javascript

onclick

在这种情况下不起作用。最好使用

href=“#”

我已经为您实现了一个

setupForm（）

，您可以在其中设置操作、占位符、隐藏输入等

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

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