我有一个带有 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 的值。
任何有关此问题的帮助将不胜感激...谢谢大家!
最佳答案
回答您的问题，
- 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();
这些有望发挥作用
关于javascript - 如何从多个下拉选择框中获取数据以发送 jquery ajax 调用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51047986/