使用jquery從取消文本框和下拉列表中取得價值

Question

我想爲我的網站創建高級搜索框。我使用了「下拉框」和「文本框1 「獲取這兩個值並在另一個」文本框「中顯示它們以開始在該網站中進行搜索。

我正在使用jquery來實現這個功能。但我無法在同一個「文本框」中顯示兩個值。它只顯示「文本值或​​下拉值」 /我想要他們都表現出** [提前搜索框] **

ADSearchbox image url

謝謝大家。

但我需要一個更多的幫助，你的人在搜索框中默認在搜索框中有取消按鈕。但它不適合我的形式。我想取消按鈕將出現的文本框1和文本BOX2任何人都可以申請取消圖像，給演示給我謝謝

$(document).ready(function(){ 
 
$('#drop').change(function(){ 
 
var option = $(this).find('option:selected').val(); 
 
$('#search').val(option); 
 
}); 
 
$('[name="2"]').change(function(){ 
 
$('#search').val($('#text').val()); 
 
}); 
 
$('[name="1"],[name="2"]').change(function() { 
 
$('#search').val($('#drop').val(option)+''+$('#text').val()); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div style="background-color:white;width:100%;min-width:289px;margin-bottom:10px;padding:7px;"> 
 
    <form> 
 
    <table> 
 
    <tr> 
 
    <td> 
 
    <div class="form-group"> 
 
     <select id="drop" name="1" class="form-control"> 
 
     <option value="Policy No">Policy No</option> 
 
     <option value="Claim No">Claim No</option> 
 
     <option value="Account No">Account No</option> 
 
     <option value="Client No">Client No</option> 
 
     </select> 
 
    </div> 
 
    </td> 
 
    <td> 
 
    <div class="form-group"> 
 
     <input type="text" name="2" value="" class="form-control" id="text" placeholder="textbox1"> 
 
    </div> 
 
    </td> 
 
\t <td> 
 
    <div class="form-group"> 
 
     <img src="img/logo/plus.png" height="25px" width="25px" style="margin-left:27%;"> 
 
    </div> 
 
    </td> 
 
    </tr> 
 
\t </table> 
 
    </form> 
 
\t <form> 
 
    <table> 
 
    <tr> 
 
    <td> 
 
    <div class="form-group"> 
 
     <input type="search" name="3" class="form-control" id="search" placeholder="textbox2"> 
 
    </div> 
 
    </td> 
 
\t <td> 
 
    <div class="form-group"> 
 
     <button type="button" class="btn btn-warning btn-xs" style="margin-left:4%;">GO</button> 
 
    </div> 
 
    </td> 
 
    </tr> 
 
\t </table> 
 
    </form> 
 
</div>

注：我也想這個功能獲取下拉值和文本值必須在文本框1旁邊的「圖像」單擊時顯示。任何人都可以幫我在這

由於提前

Answer 1

僅使用$('#drop').val()此爲您提供selected option value.Use此fiddle：如果要執行

JS

$(document).ready(function() { 
    $('#drop').change(function() { 
    var option = $(this).find('option:selected').val(); 
    $('#search').val(option); 
    }); 
    $('[name="2"]').change(function() { 
    $('#search').val($('#text').val()); 
    }); 
    $('[name="1"],[name="2"]').change(function() { 
    $('#search').val($('#drop').val() + '' + $('#text').val()); 
    }); 
}); 

這在圖像上click：

個JS

$(document).ready(function() { 
    $('img').on('click', function() { 
    $('#search').val($('#drop').find(':selected').val() + '' + $('#text').val()); 
    }); 
}); 

Answer 2

你可以這樣說：

$(document).ready(function() { 
 
    
 
    $('#drop').on('change', function() { 
 
    fillTextSearch(); 
 
    }); 
 
    
 
    $('#text').on('input', function() { 
 
    fillTextSearch(); 
 
    }); 
 
    
 
    function fillTextSearch() { 
 
    var option_txt = $("#drop").val(); 
 
    var searchVal = $('#text').val(); 
 
    $('#search').val(option_txt + ', ' + searchVal); 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background-color:white;width:100%;min-width:289px;margin-bottom:10px;padding:7px;"> 
 
    <form> 
 
    <table> 
 
    <tr> 
 
    <td> 
 
    <div class="form-group"> 
 
     <select id="drop" name="1" class="form-control"> 
 
     <option disabled selected>Select</option> 
 
     <option value="Policy No">Policy No</option> 
 
     <option value="Claim No">Claim No</option> 
 
     <option value="Account No">Account No</option> 
 
     <option value="Client No">Client No</option> 
 
     </select> 
 
    </div> 
 
    </td> 
 
    <td> 
 
    <div class="form-group"> 
 
     <input type="text" name="2" value="" class="form-control" id="text" placeholder="textbox1"> 
 
    </div> 
 
    </td> 
 
\t <td> 
 
    <div class="form-group"> 
 
     <img src="img/logo/plus.png" height="25px" width="25px" style="margin-left:27%;"> 
 
    </div> 
 
    </td> 
 
    </tr> 
 
\t </table> 
 
    </form> 
 
\t <form> 
 
    <table> 
 
    <tr> 
 
    <td> 
 
    <div class="form-group"> 
 
     <input type="search" name="3" class="form-control" id="search" placeholder="textbox2"> 
 
    </div> 
 
    </td> 
 
\t <td> 
 
    <div class="form-group"> 
 
     <button type="button" class="btn btn-warning btn-xs" style="margin-left:4%;">GO</button> 
 
    </div> 
 
    </td> 
 
    </tr> 
 
\t </table> 
 
    </form> 
 
</div>

希望這有助於！

Answer 3

如何：

$('.search_field').on("change",function(){ 
    search_value = $('#drop option:selected').html() + " " + $('#text').val(); 
    $('#search').val(search_value); 
}); 

然後就該類search_field添加到<select>箱和<input>。 每當他們改變搜索字段將被更新。

這裏有一個演示：https://jsfiddle.net/324she75/3/

希望這是有用的