Question

我想要做的就是我有2个下拉菜单。我希望ajax仅在两个下拉列表中选择了值时才有效。我如何传递两者的数据？这是我现在的代码

SCRIPT

<script>
function getState(val) {
    $.ajax({
    type: "POST",
    url: "get_state.php",
    data:'country_id='+val,
    success: function(data){
        $("#state-list").val(data);
    }
    });
}
</script>

INDEX

<label>Group:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Group</option>
<?php
while($row = mysql_fetch_array($results)) {
?>
<option value="<?php echo $row["g_id"]; ?>"><?php echo $row["g_name"]; ?>    </option>
<?php
}
?>
</select>
<label>Division:</label><br/>
<select name="division" id="div-list" class="demoInputBox"  onChange="getState(this.value);">
<option value="">Select Division</option>
<?php
while($row = mysql_fetch_array($results2)) {
?>
<option value="<?php echo $row["d_id"]; ?>"><?php echo $row["div_name"]; ?>    </option>
<?php
}
?>
</select>

getstate.php

<?php
include("dbcon2.php");
if(!empty($_POST["country_id"])) {
$query ="SELECT * FROM personnel_gdd WHERE pg_group = '" .    $_POST["country_id"] . "' ";
$results = mysql_query($query) or die(mysql_error());
?>

<?php
$row = mysql_num_rows($results)
?>
<?php echo $row; ?>

PS：我知道mysql已被弃用。一旦这个问题得到解决，我就会对其进行更改。谢谢！

Answer 1

更改

    onchange="getState()"

不要在onchange事件中传递任何值。并像这样更改你的脚本

<script>
function getState(val) {
    var country = $("#country-list").val();
    var div = $("#div-list").val();
    if(country && div) {
        $.ajax({
            type: "POST",
            url: "get_state.php",
            data:{"country_id": country,"div":div},
            success: function(data){
                $("#state-list").val(data);
             }
        }); 
    }
}
</script>

Answer 2

这个答案是通用的，与您的数据无关，但您可以理解如何弄清楚。

$('select').change(function() {
  var group = $('#country-list').val();
  var div = $('#div-list').val();
  
  if (group == -1 || div == -1) {
    alert('please select country and division');  
  }
  else {
    $.ajax({
      type: "POST",
      url: "get_state.php",
      data:'country_id=' + country + '&=div_id' + div,
      success: function(data){
          $("#state-list").val(data);
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Group:</label>
<select name="country" id="country-list" class="demoInputBox">
<option value="-1">Select Group</option>
<option value="1">Country 1</option>
  <option value="1">Country 1</option>
  <option value="2">Country 2</option>
  <option value="3">Country 3</option>
</select>
<br />
<label>Division:</label>
<select name="division" id="div-list" class="demoInputBox">
<option value="-1">Select Division</option>
  <option value="1">Division 1</option>
  <option value="2">Division 2</option>
  <option value="3">Division 3</option>
</select>

比在服务器中获得2个值并将数据返回给客户端。然后把这些数据放到第三个下拉列表中。

Answer 3

HTML

<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox"     onChange="getState(this.value);">
<option value="">Select Country</option>
<?php
$selq = "your query..............";
$selm = mysql_query($selq);
while($row = mysql_fetch_array($selm)) 
{
    ?>
    <option value="<?php echo $row["country_id"]; ?>"><?php echo $row["name"]; ?>    </option>
    <?php
}
?>
</select>
<select name="state" id="state-list" >
</select>

Javascript功能

function getState(val) {

$.ajax({
type: "POST",
url: "test2.php",
data:'country_id='+val,
success: function(data){
    $("#state-list").append('<option value=""></option>');
    $('#state-list').html(data);
}
});

}

Ajax PHP文件

if(!empty($_POST["country_id"])) 
{
    $query ="your query............... ";
    $results = mysql_query($query) or die(mysql_error());
    while($fetch = mysql_fetch_array($results))
    {
        ?>
        <option value="<?php echo $fetch['id']?>" ><?php echo $fetch['name'] ?></option>
        <?php 
    }
}

Answer 4

您只需检查所有值是否与-1或“”或其他值不同 - 然后构建数据对象并触发Ajax：

JSnippet Demo

function runAjax() {

 //Check both:
 check = true;
 $('select').each(function(){
   console.log($(this).val())
    if ($(this).val() == -1) {
      $('span').text("Please select both.");
      check = false
    }
 });
 if (!check) return;

 $('span').text("OK. submiting");

 //Get the data:
 var data = {
    select1: $('#sel1').val(),
    select2: $('#sel2').val()
 };

 //Go on with ajax....
}

两个下拉列表，其中一个onchange

4 个答案: