获取文本框和下拉列表的当前值,并使用jquery输出它们

时间:2013-05-05 21:43:54

标签: php javascript jquery textbox html-select

我想要做的是同时输出文本框值和下拉列表选择值。原因是我想最终通过mysql db表对结果进行排序。现在......当我更改文本框时,它将添加到下拉列表值,这就是我想要的。但是当我更改下拉列表值时,它将无法识别文本框值并恢复到文档作为值加载时。如何获取这两个值并回显它们并能够更改它们并在文本框上“键入”或“更改”下拉列表值时查看更改。提前谢谢。

jquery的

$(document).ready(function () {
    var type_term = $("#type option:selected").text()
    var search_term = $("#search").val()
    $.post('search_db.php',{type_term:type_term, search_term:search_term}, function (data) {
        $('#search_results').html(data) 
    });
    $('#search').keyup(function() {
        var search_term = $("#search").val()
        $.post('search_db.php',{type_term:type_term, search_term:search_term}, function (data) {
            $('#search_results').html(data) 
        });
    });
    $('#type').change(function() {
        var type_term = $("#type option:selected").text()
        $.post('search_db.php',{type_term:type_term, search_term:search_term}, function (data) {
           $('#search_results').html(data)      
        });
    });
});

HTML

<input id="search" type="text" value="Value">

<select id="type">
<option>Type1</option>
<option>Type2</option>
</select>

<div id="search_results"></div>

searchdb.php

$type_term = $_POST['type_term'];
$search_term = $_POST['search_term'];

echo $type_term;
echo $search_term;

1 个答案:

答案 0 :(得分:0)

尝试在每个事件上设置两个表单元素的变量,而不仅仅是您要更改的表单元素。

$(document).ready(function () {
var type_term = $("#type option:selected").text()
var search_term = $("#search").val()
$.post('search_db.php',{type_term:type_term, search_term:search_term}, function (data) {
    $('#search_results').html(data) 
});
$('#search').keyup(function() {
    var search_term = $("#search").val()
    var type_term = $("#type option:selected").text()
    $.post('search_db.php',{type_term:type_term, search_term:search_term}, function (data) {
        $('#search_results').html(data) 
    });
});
$('#type').change(function() {
    var search_term = $("#search").val()
    var type_term = $("#type option:selected").text()
    $.post('search_db.php',{type_term:type_term, search_term:search_term}, function (data) {
       $('#search_results').html(data)      
    });
});
});