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

Question

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

这是我对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>

这是我到目前为止拥有的Java语言，需要一些帮助才能将数据发送到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的“值”。

任何帮助，将不胜感激...谢谢大家！

Answer 1

您的问题的答案，

1. Input-Box-1的“值”： sel.value;
2. Input-Box-1的“ data-extra1”： $（'＃Input_Box_2'）。find（'：selected'）。attr（'data-extra1'）;
3. “ Input-Box-2的值： $（'＃Output_Box_1'）。value（）;

那些将有望工作

Answer 2

如果使用的是jQuery，则可以执行以下示例：

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

因此，您将获得所选选项的值，如果要查找任何属性，则需要使用attr()进行查找，因此就像：

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