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

Question

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

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

package packageC.subPackageA;

import packageB.subPackageA.*;

public ClassCA
{
    private ClassBA testClass;

    public ClassCA()
    {
    }
    public void sayHelloWorld()
    {
        System.out.println("Hello World from CA....");
        testClass = new ClassBA();
        testClass.sayGoodbyeWorld();
    }
}

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

<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>

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

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. “输入框2的值： $（'＃Output_Box_1'）。value（）;

那些将有望工作

Answer 2

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

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

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

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