2013-02-12 67 views
1

嘗試獲取值爲<select> onchange的其他<select>標記值。我有兩個名爲vehicle_type和part_type的下拉列表。當選擇車輛類型和零件類型時,我想要做的事情需要更改零件名稱下拉列表。它與車型和部件型組合不同。所以我寫了下面的代碼。有人能幫我找到這段代碼的錯誤嗎?我是新來的jQuery獲取要在多選擇框的onchange上選擇的值,其中jquery爲

我的HTML

<div> 
        <label>Vehicle Type</label> 
        <label> 
         <select name="vehicle_type" id="vehicle_type" required> 
          <option value='' disabled selected style='display:none;'>Select Vehicle</option> 
          <option value="Car">Car</option> 
          <option value="Van">Van</option> 
          <option value="SUV/4WD">SUV/4WD/CAB</option> 
          <option value="Truck">Truck</option> 
         </select> 
        </label> 
       </div> 
       <div> 
        <label>Part Type</label> 
        <label> 
         <select name="part_type" id="part_type" required> 
          <option value='' disabled selected style='display:none;'>Select Part Type</option> 
          <option value="Engine">Engine</option> 
          <option value="Body">Body</option> 
         </select> 
        </label> 
       </div> 
       <div> 
        <label>Part Name</label> 
        <label> 
         <select name="part_name" id="part_name" required> 
          <option value='' disabled selected style='display:none;'>Select Part Name</option> 
         </select> 
        </label> 
       </div> 

#dropdown.js 
function setSelect(vehicle_type, part_type){ 
$.post("dropdown.php",{"vehicle_type":vehicle_type, "part_type":part_type},function(data){ 
    $("#part_name").html(data); 
}); 
} 

$(document).ready(function(){ 

$("#vehicle_type").live('change', function(){ 
    var vehicle = $(this+"option:selected").val(); 
}); 

$("#part_type").live('change', function(){ 
    var part = $(this+"option:selected").val();  
}); 

setSelect($("#vehicle_type option:selected").val(), $("#part_type option:selected").val()); 
}); 

我dropdown.php

<?php 
if(isset($_POST['vehicle_type'])&&isset($_POST['part_type'])){ 

    $vehicle_type =$_POST['vehicle_type']; 
    $part_type =$_POST['part_type']; 

    if(($vehicle_type=="Car")&&($part_type=="Engine")){ 
     $partname = "<option value=\"Engine Head Block\">Engine Head Block</option>"; 
     $partname .= "<option value=\"Engine Complete W/O Gear Box\">Engine Complete W/O Gear Box</option>"; 
     $partname .= "<option value=\"Engine With A/T CVT Gear Box\">Engine With A/T CVT Gear Box</option>"; 
} elseif(($vehicle_type=="Car")&&($part_type=="Body")){ 
     $partname = "<option value=\"Nose Pannel/Parts\">Nose Pannel/Parts</option>"; 
     $partname .= "<option value=\"Front Bumper With Fog Lamp L/R\">Front Bumper With Fog Lamp L/R</option>"; 
     $partname .= "<option value=\"Front Bumper Bracket Retainer L/R\">Front Bumper Bracket Retainer L/R</option>"; 
} 

請告訴我的錯誤。我是新來的jQuery

回答

1

試試這個:

<?php 
if(isset($_POST['vehicle_type'])&&isset($_POST['part_type'])){ 

$vehicle_type =$_POST['vehicle_type']; 
$part_type =$_POST['part_type']; 

if(($vehicle_type=="Car")&&($part_type=="Engine")){ 
    $partname = "<option value=\"Engine Head Block\">Engine Head Block</option>"; 
    $partname .= "<option value=\"Engine Complete W/O Gear Box\">Engine Complete W/O Gear Box</option>"; 
    $partname .= "<option value=\"Engine With A/T CVT Gear Box\">Engine With A/T CVT Gear Box</option>"; 
} elseif(($vehicle_type=="Car")&&($part_type=="Body")){ 
    $partname = "<option value=\"Nose Pannel/Parts\">Nose Pannel/Parts</option>"; 
    $partname .= "<option value=\"Front Bumper With Fog Lamp L/R\">Front Bumper With Fog Lamp L/R</option>"; 
    $partname .= "<option value=\"Front Bumper Bracket Retainer L/R\">Front Bumper Bracket Retainer L/R</option>"; 
} 
echo $partname; 
} 
?> 

無需更換HTMLS。只需將JS更改爲

<script type="text/javascript"> 

function setSelect(vehicle_type, part_type){ 
//alert(vehicle_type+part_type); 
$.post("dropdown.php",{"vehicle_type":vehicle_type, "part_type":part_type},function(data){ 
    $("#part_name").html(data); 

}); 
} 

$(document).ready(function(){ 

$("#vehicle_type").change(function(){ 
var vehicle = $("option:selected",this).val(); 

}); 

$("#part_type").change(function(){ 
var part = $("option:selected",this).val(); 
setSelect($("#vehicle_type option:selected").val(), $("#part_type option:selected").val()); 
}); 


    }); 
</script>