javascript 如何在jQuery( AJAX )中从两个或多个select中获取值

u2nhd7ah 于 2023-01-19 发布在 Java

关注(0)|答案(2)|浏览(141)

这是HTML中的一个select & option。我在这里使用jQuery。我需要获取两个select的值，并将这些值传递给ajax.php，在这里我需要使用这两个值签入我的数据库，并继续另一个依赖下拉列表。

<label>Select Number: </label>
<select id= "number" onchange="FetchState(this.value)" required>
      <option value="0">-- 0 --</option>
      <option value="1">-- 1 --</option>
      <option value="2">-- 2 --</option>
      <option value="3">-- 3 --</option>
</select>

<label>Select letter: </label>
<select id="alphabet" required>
      <option value="a">-- a --</option>
      <option value="b">-- b --</option>
      <option value="c">-- c --</option>
      <option value="d">-- d --</option>
</select>
<select id="dependent">
</select>

这是我写在下面的脚本代码。

function FetchState(id) {
        $("#dependent").html('');
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: {
                number: id,
            },
            success: function(data) {
                $("#dependent").html(data);
            }
        });
    }
</script>

我需要通过jQuery（ AJAX ）将两个值传递给PHP以继续下一步，这里的字母和字母表值都应该是get，并作为jQuery中的数据传递给ajax.php

JavaScript

来源：https://stackoverflow.com/questions/74479313/how-to-get-values-from-two-or-more-select-in-jquery-ajax

2条答案

按热度按时间

ozxc1zmp1#

html有点奇怪，但是因为你总是在两个下拉菜单中有一个选择，我们可以简单地这样做

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function FetchState() {
    id =  $('#number option:selected').val();
    alp = $('#alphabet option:selected').val();
            
    $.ajax({
        type: "POST",
        url: "ajax_endpoint.php",
        data: {number: id, alphabet: alp},
        success: function(data) {
            $("#dependent").html(data);
        }
    });
}
</script>
</head>
<body>

<form method="POST" >  
    <label>Select Number: </label>
    <select id= "number" onchange="FetchState()" required>
        <option value="0">-- 0 --</option>
        <option value="1">-- 1 --</option>
        <option value="2">-- 2 --</option>
        <option value="3">-- 3 --</option>
    </select>

    <label>Select letter: </label>
    <select id="alphabet" onchange="FetchState()" required>
        <option value="a">-- a --</option>
        <option value="b">-- b --</option>
        <option value="c">-- c --</option>
        <option value="d">-- d --</option>
    </select>
    <select id="dependent"></select>

</form>

</body>
</html>

如果虚拟的ajax_端点. php是这样的

<?php
echo '<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
<option value="dd">dd</option>';
?>

它应该会为您填充第3个下拉列表

赞(0）回复(0）举报 2023-01-19

omqzjyyz2#

声明一个数组，推到它，然后当你到达数组中的两个元素时触发 AJAX 调用，这怎么样？

var bothnumbers = [];

function FetchState(id) {
bothnumbers.push(id);
console.log('your array: '+bothnumbers);

if(bothnumbers.length == 2){
    console.log('fire function now that two are chosen');
        $("#dependent").html('');
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: {
                number: bothnumbers,
            },
            success: function(data) {
                $("#dependent").html(data);
            }
        });
}

    }

赞(0）回复(0）举报 2023-01-19

我来回答

javascript 如何在jQuery( AJAX )中从两个或多个select中获取值

2条答案

相关问题

热门标签

最新问答