Bootstrap 选择下拉菜单以更改搜索条件答案

【问题标题】：Bootstrap select dropdown to change search criteriaBootstrap 选择下拉菜单以更改搜索条件
【发布时间】：2015-12-05 11:23:20
【问题描述】：

我想通过主下拉菜单更改多个子下拉菜单。

更改的搜索条件在下图中用红色标记（这也是下拉菜单，但根据所选的主下拉菜单是完全不同的搜索条件）

我该怎么做？

更新：我有一些现有的代码，在选择时它正在更改从下拉列表中选择的文本。有没有办法可以修改下面的代码？

REAL.searchBy = function() {
          $('.search_by').find('select').change(function(){
             var search_by= $(this).val();
            $(this).parents('.search_by').find('.search_by_keyword').val('Enter '+(search_by));
          $(".search_by_keyword" ).attr('name',search_by.toLowerCase()).focus();
          })
	}

<div class="search_by">
                                <div class="search-field">
                                    <label>Search By</label>

                                    <select class="form-control selectpicker" name="search_by" style="display: none;">
                                        <option selected="">Search By</option>
                                        <option value="Id">Id</option>
                                        <option value="test">test</option>
                                        <option value="Pincode">Pincode</option>
                                    </select>
                             
                                </div>
                                <div class="search-field"><label>Keyword</label>
                             	    <input type="text" placeholder="Please enter " class="form-control input-lg search_by_keyword" name="pincode">
                                </div>
                 </div>

【问题讨论】：

你试过了吗？看看 jQuery 事件监听器和修改 DOM 元素的函数
谢谢@Valijon，我已经尝试过这个例子jsfiddle.net/65Q9L/452 但是，当我应用“表单控制选择选择器”类时它会中断，我试图将它应用到这个模板preview.imithemes.com/real-spaces/index.html，它还需要保存主下拉状态和子项
你能给我们看看你的 jQuery/JS 代码吗？
jsFiddle 示例很简单 select，但在 imithemes.com 中是 boostrap 下拉列表 (ul)
当然，我的搜索与preview.imithemes.com/real-spaces/property-type.html搜索框相同，这有帮助吗？

标签： javascript jquery asp.net twitter-bootstrap

【解决方案1】：

这是一种如何归档您期望的内容的方法：

$('.search_by').find('select').change(function(){
    var search_by= $(this).val();
    $(this).parents('.search_by').find('.search_by_keyword').val('Enter '+(search_by));
    $(".search_by_keyword" ).attr('name',search_by.toLowerCase()).focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search_by">
    <div class="search-field">
        <label>Search By</label>

        <select class="form-control selectpicker" name="search_by">
            <option selected="">Search By</option>
            <option value="Id">Id</option>
            <option value="test">test</option>
            <option value="Pincode">Pincode</option>
        </select>
                             
    </div>
    <div class="search-field">
        <label>Keyword</label>
        <input type="text" placeholder="Please enter " class="form-control input-lg search_by_keyword" name="pincode">
    </div>
</div>

【讨论】：

谢谢，我已经尝试过了，但是我无法让它与现有代码一起使用，即使当我单击 Cottage 时，它也会向我显示与其他选项相同的选项，并且还会取消引导样式
你能在调试控制台看到什么错误吗？
没有错误，你有没有机会进行teamvier和查看？
尝试将jQuery代码放入$( document ).ready(function() { // Here al jQuery code });
你能看看我的编辑吗？你给我的代码和js一直在破坏引导元素，那么可以编辑模板中的现有代码吗？