Javascript 如何从下拉列表中获取所选值并将其传递给sql查询

Javascript 如何从下拉列表中获取所选值并将其传递给sql查询,javascript,php,jquery,mysql,Javascript,Php,Jquery,Mysql,我有两个下拉列表框,第一个是sales area,包含从cookie中获取的不同种类的字母,第二个下拉列表中的人员姓名是根据第一个下拉列表中选择的值进行更改。如何将所选选项值传递给sql查询,以便根据所选销售区域进行更改。 我将代码插入到代码段中,以便于编辑和演示 function fetch\u select(val) { $.ajax({ 键入:“post”, url:'UpdateLave.php', 数据:{ 获取选项:val }, 成功:功能(响应){ document.getEle

我有两个下拉列表框,第一个是sales area,包含从cookie中获取的不同种类的字母,第二个下拉列表中的人员姓名是根据第一个下拉列表中选择的值进行更改。如何将所选选项值传递给sql查询,以便根据所选销售区域进行更改。 我将代码插入到代码段中,以便于编辑和演示

function fetch\u select(val)
{
$.ajax({
键入:“post”,
url:'UpdateLave.php',
数据:{
获取选项:val
},
成功:功能(响应){
document.getElementById(“slct2”).innerHTML=响应;
}
});

销售区域

我不喜欢jQuery,所以您需要将我的Javascript转换为您的需要,但您需要的是为第一个下拉菜单捕获onchange事件,并使用它动态处理第二个下拉菜单的SQL

<script>
document.getElementById('area').onclick = function(){
    var xmlhttp;
    var formData = new FormData();
    formData.append('area_value', this.value);
    if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
    } else {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText); // for DEBUGGING.
                    if(xmlhttp.responseText == 'false'){
                            alert(xmlhttp.responseText);
                    } else {
                            document.getElementById('slct2').innerHTML = xmlhttp.responseText;
                    }
            }
    }
    xmlhttp.open("POST", 'build_slct2.php');
    xmlhttp.send(formData);
    xmlhttp.onerror = function () { console.error(xmlhttp.statusText); }
}
</script>

document.getElementById('area')。onclick=function(){
var-xmlhttp;
var formData=new formData();
formData.append('area_value',this.value);
if(window.XMLHttpRequest){
xmlhttp=新的XMLHttpRequest();
}否则{
xmlhttp=新的ActiveXObject(“Microsoft.xmlhttp”);
}
xmlhttp.onreadystatechange=函数(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
警报(xmlhttp.responseText);//用于调试。
if(xmlhttp.responseText=='false'){
警报(xmlhttp.responseText);
}否则{
document.getElementById('slct2')。innerHTML=xmlhttp.responseText;
}
}
}
open(“POST”,“build_slct2.php”);
xmlhttp.send(formData);
xmlhttp.onerror=function(){console.error(xmlhttp.statusText);}
}

build\u slct2.php
脚本将使用
$\u POST['area\u value']
要创建所需的SQL查询,请处理查询,并构建
列表,该列表最终将出现在
slct2
下拉列表中。
build\u slct2.php
文件只需
echo
响应
slct2
的新内容即可。我不喜欢jQuery,因此您需要将我的Javascript转换为您的需要,但是您需要的是捕获第一个下拉列表的onchange事件,并使用它动态处理第二个下拉列表的SQL

<script>
document.getElementById('area').onclick = function(){
    var xmlhttp;
    var formData = new FormData();
    formData.append('area_value', this.value);
    if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
    } else {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText); // for DEBUGGING.
                    if(xmlhttp.responseText == 'false'){
                            alert(xmlhttp.responseText);
                    } else {
                            document.getElementById('slct2').innerHTML = xmlhttp.responseText;
                    }
            }
    }
    xmlhttp.open("POST", 'build_slct2.php');
    xmlhttp.send(formData);
    xmlhttp.onerror = function () { console.error(xmlhttp.statusText); }
}
</script>

document.getElementById('area')。onclick=function(){
var-xmlhttp;
var formData=new formData();
formData.append('area_value',this.value);
if(window.XMLHttpRequest){
xmlhttp=新的XMLHttpRequest();
}否则{
xmlhttp=新的ActiveXObject(“Microsoft.xmlhttp”);
}
xmlhttp.onreadystatechange=函数(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
警报(xmlhttp.responseText);//用于调试。
if(xmlhttp.responseText=='false'){
警报(xmlhttp.responseText);
}否则{
document.getElementById('slct2')。innerHTML=xmlhttp.responseText;
}
}
}
open(“POST”,“build_slct2.php”);
xmlhttp.send(formData);
xmlhttp.onerror=function(){console.error(xmlhttp.statusText);}
}

build\u slct2.php
脚本将使用
$\u POST['area\u value']
要创建所需的SQL查询,请处理查询,并构建
列表,该列表将最终出现在
slct2
下拉列表中。
build_slct2.php
文件只需
echo
响应
slct2
的新内容,使用append添加带有in-select标记的选项标记,即可完成所有更改事件中的工作第一个下拉列表(“区域”)


使用“附加”添加选项标记,并在第一个下拉列表(“区域”)的“选择标记”中还执行所有更改中的工作



你是在尝试实时执行此操作吗?当我更改第一个下拉列表时,第二个下拉列表会立即通过SQL调用进行更新?是的,这正是我想要的,伙计!任何建议您可能需要一个依赖的下拉列表研究AJAX和JSON。当第一个下拉列表更改时,您在服务器上对脚本进行AJAX调用,然后重试为第二个下拉列表添加数据,然后将这些选项放在第二个下拉列表中。jQuery使这变得非常简单。周围有很多示例代码。您能否给出一些建议或示例,以便我将其作为参考。您是否尝试实时执行此操作?当我更改第一个下拉列表时,第二个下拉列表将立即执行通过SQL调用进行更新?是的,这正是我想要的,伙计!任何建议您可能需要一个依赖的下拉菜单Research AJAX和JSON。当第一个下拉菜单发生更改时,您对服务器上的脚本进行AJAX调用,然后返回第二个下拉菜单的数据,并将这些选项放在第二个下拉菜单中。jQuery使这一点变得更漂亮很简单。到处都是示例代码。你能给我一些建议或示例吗?这样我就可以把它作为参考了。谢谢你的建议,我需要把它修改成新的jquery还是直接放到我的程序中?我已经更新了我的作品,它把它变成了ajax函数,但它似乎不适合我的程序。这将你需要找出失败的原因。我在第13行添加了一个
alert()
。让你的
build\u slct2.php
脚本简单地
print\r($\u POST);return;
以确保需要发送的数据已到达。我还添加了一个
onerror
行,该行将打印到Javascript控制台,以查看Ajax代码是否出错。它显示一个警报消息数组{area value=1}这对我意味着什么?当我点击L时,这条消息就出来了。我做错了什么吗?谢谢你的建议,我需要把它修改成新的jquery还是直接放到我的程序中?我哈