如何从多个下拉选择框中获取数据以发送 jquery ajax 调用？答案

【问题标题】：How do I get data from Multiple dropdown select boxes to send a jquery ajax call?如何从多个下拉选择框中获取数据以发送 jquery ajax 调用？
【发布时间】：2018-12-05 11:25:36
【问题描述】：

我有一个带有 2 个选择框的表单，我们将调用输入框 1 和输入框 2。当在输入框 1 中进行选择时，我使用 onChange 事件来调用应该从输入框获取一些数据的脚本1 和输入框 2 通过 Ajax 发送到脚本，该脚本将返回指定 div 中的第三个选择框，其中包含来自数据库的过滤值。我已经解决了大部分问题，但在从页面输入选择框获取所需数据时遇到问题。用于视觉辅助的表单区域的图像如下图所示：

这是我的 html 表单部分的代码：

<div id="Input_Div_1">
<select name="Input_Box_1" id="Input_Box_1" onchange="sendthedatatotheajax(this);">
<option value="1" data-image="image1.jpg" data-extra1="a">Apple</option>
<option value="2" data-image="image2.jpg" data-extra1="b">Banana</option>
<option value="3" data-image="image3.jpg" data-extra1="c">Orange</option>
<option value="4" data-image="image4.jpg" data-extra1="d">Grapes</option>
</select>
</div>

<div id="Input_Div_2">
<select name="Input_Box_2" id="Input_Box_2">
<option value="1" data-image="image_cat.jpg" data-extra1="x">Red</option>
<option value="2" data-image="image_dog.jpg" data-extra1="y">Blue</option>
<option value="3" data-image="image_pig.jpg" data-extra1="z">Green</option>
<option value="4" data-image="image_wolf.jpg" data-extra1="qq">Cyan</option>
</select>
</div>

<div id="Output_Div_1">
<select name="Output_Box_1" id="Output_Box_1">
<option value="1" data-image="image_usa.jpg" data-extra1="washington">Waiting for Data 1</option>
<option value="2" data-image="image_russia.jpg" data-extra1="moscow">Waiting for Data 2</option>
</select>
</div>

这是我目前拥有的 Javascript，需要一些帮助才能将数据发送到 php 脚本，该脚本将返回第三个选择输出框。

<script>
function sendthedatatotheajax(sel) {
    var the_Input_Box_1_value = sel.options[sel.selectedIndex].value;

// This is where I Need Help Start
    var the_Input_Box_1_dataextra1 = [how.do.i.get.this.value?].value;
    var the_Input_Box_2_value = [again.how.do.i.get.this.value?].value;
// This is where I Need Help Stop

    $("#Output_Div_1").html( "" );
    if (the_Input_Box_1_value.length > 0 ) { 

     $.ajax({
            type: "POST",
            url: "sendbackthedata.php",
            data: {"inputbox1value": the_Input_Box_1_value, "inputbox1dataextra1": the_Input_Box_1_dataextra1, "inputbox2value": the_Input_Box_2_value},
            cache: false,
            beforeSend: function () { 
                $('#Output_Div_1').html('<img src="loader.gif" alt="" width="24" height="24">');
            },
            success: function(html) {    
                $("#Output_Div_1").html( html );
            }
        });
    } 
}
</script>

我的问题是我用什么代码来获得以下内容

1) Input-Box-1 的“值” 2) Input-Box-1 的“data-extra1” 3) Input-Box-2的"值。

对此的任何帮助将不胜感激......谢谢大家！

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

回答您的问题，

Input-Box-1 的“值”：sel.value;
Input-Box-1 的“data-extra1”：$('#Input_Box_2').find(':selected').attr('data-extra1');
Input-Box-2 的“值：$('#Output_Box_1').value();

这些都会有希望的

【讨论】：

【解决方案2】：

如果你使用的是 jQuery，那么你可以按照下面的例子来做：

$("#Input_Box_2 option:selected").val()

所以你会得到所选选项的值，如果你想找到任何属性，你需要用attr()寻找它，所以它会是这样的：

$("#Input_Box_2 option:selected").attr("data-extra1")

【讨论】：