Bootstrap选择下拉列表以更改搜索条件

时间:2015-12-05 11:23:20

标签: javascript jquery asp.net twitter-bootstrap

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

更改的搜索条件在下图中以红色标记(也是下拉列表,但根据所选的主下拉列表是完全不同的搜索条件)

我该怎么办?

enter image description here

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



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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

以下是一种如何存档您期望的方法:

$('.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>