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()" 

DONOT在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); 
} 
}); 

}

阿賈克斯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.... 
}