Question

所以我有一个问题，试图弄清楚如何让它工作。我想做一个下拉选择，我希望下拉列表中的所有选项都显示在主输入框中以及原始输入值。

这是我用来将值发送到ajax发送到我的php文件的表单。

<div class="input-group" id="adv-search">
    <input type="text" name="input1" class="form-control" id="filter" id="searchbox" placeholder="Something..."/ required>
                <div class="input-group-btn">
                    <div class="btn-group" role="group">
                        <div class="dropdown dropdown-lg">
                            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                            <div class="dropdown-menu dropdown-menu-right" role="menu">
                            <form class="form-horizontal" role="form">
                            <div class="form-group">
                            <h4 class="text-center">Advanced Search</h4>
                            <label for="filter">Option</label>
                            <select class="form-control" name="place" id="myList">
                                <option selected></option>
                                <option value="option1">Option1</option>
                                <option value="option2">Option2</option>
                                <option value="option3">Option3</option>
                            </select>
                            </div>
                            <div class="form-group">
                                <label for="contain">Location</label>
                                <input class="form-control" name="something1" type="text" id="list2">
                            </div>
                            <div class="form-group">
                                <label for="contain">Something2</label>
                                <input class="form-control" name="contain" type="text" id="list3">
                            </div>
                            <p><br/>
                            <button type="submit" id="insideButton" name="submit" class="btn btn-primary">Advanced Search</button>
                            </form>
                            </div>
                            <button type="submit" id="buttonClass" name="submit2" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

现在我正在尝试从选择下拉列表（#myList）和其他输入（＃list2，＃list3）中获取值，并将其显示在主输入（#filter）中以及输入的值中。（＃过滤）。我的下面的代码将按键显示它们，但它在函数中重复它。如何在#filter输入中显示每个输入。

$('#list2').on("input", function(){
    var filter = $(this).val();
    var myList = $('#filter').val();
    $('#filter').val(filter + " " + myList);
});

这是我想要完成的图片。非常感谢任何和所有的帮助。谢谢。

Answer 1

你好如果我根据你的图像和你的代码片段正确理解你想要将所有选项输入值放到主搜索框中，那么你可以试试这个Jquery代码

<script>
          $(document).ready(function() {
          $("#insideButton").click(function(e) {
          e.preventDefault();
          $("#filter").val($("#list3").val()+" "+ $("#list2").val()+" 
          "+$("#myList").val()+" "+$("#filter").val());
          });
          });
</script>

我只使用了一个按钮作为提交选项，您可以根据需要进行更改如果你想要表单提交选项，你也可以编写相同的代码然后会有一点点改变

<script>
          $(document).ready(function() {
          $(".form-horizontal").on('submit',function(e) {
          e.preventDefault();
          $("#filter").val($("#list3").val()+" "+ $("#list2").val()+" 
          "+$("#myList").val()+" "+$("#filter").val());
          });
          });
 </script>

希望它可以帮助你检查这个小提琴 fiddle demo

如何在主输入中显示原始值的其他输入

1 个答案: