根據另一個選擇顯示一個選擇的下拉值

Question

我有一個“項目”的表格，如下所示

Project_ID   |   Client_ID
---------------------------
    P1              C1
    P2              C1
    P3              C2
    P4              C2
    P5              C3
    P6              C3

我有一個選擇ID =“ 1” ，其中顯示了所有的客戶端ID。

我正在顯示另一個select id =“ 2”，以顯示分配給客戶端ID的所有項目。

基本上我想顯示選項值選擇ID =“2”基於從選擇ID =“1”選擇的值。

如果有人選擇的示例

<option value="C3">C3</option>

然后下面應該在那里

<select id="2">
    <option value="P5">P5</option>
    <option value="P6">P6</option>
</select>

我以為Ajax是答案，但我不知道這樣做的正確方法。

Answer 1

您可以為選擇框的onChange事件添加事件偵聽器。 在change事件上，獲取選擇框的值，並使用ajax請求將其值發送到服務器，並基於第一個選擇框的值獲取要在第二個選擇框顯示的值，並在第二個選擇框顯示該值。 基於國家選擇的州選擇示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populate City Dropdown Using jQuery Ajax</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(".country option:selected").val();
        $.ajax({
            type: "POST",
            url: "process-request.php",
            data: { country : selectedCountry } 
        }).done(function(data){
            $("#response").html(data);
        });
    });
});
</script>
</head>
<body>
<form>
    <table>
        <tr>
            <td>
                <label>Country:</label>
                <select class="country">
                    <option>Select</option>
                    <option value="usa">United States</option>
                    <option value="india">India</option>
                    <option value="uk">United Kingdom</option>
                </select>
            </td>
            <td id="response">
                <!--Response will be inserted here-->
            </td>
        </tr>
    </table>
</form>
</body> 
</html>

后端：

<?php
if(isset($_POST["country"])){
    // Capture selected country
    $country = $_POST["country"];

    // Define country and city array
    $countryArr = array(
                    "usa" => array("New Yourk", "Los Angeles", "California"),
                    "india" => array("Mumbai", "New Delhi", "Bangalore"),
                    "uk" => array("London", "Manchester", "Liverpool")
                );

    // Display city dropdown based on country name
    if($country !== 'Select'){
        echo "<label>City:</label>";
        echo "<select>";
        foreach($countryArr[$country] as $value){
            echo "<option>". $value . "</option>";
        }
        echo "</select>";
    } 
}
?>

Answer 2

您可以在更改的第一個選擇上觸發事件，並使用第一個選擇的項目ID進行ajax調用。 然后通過ajax獲取內容，並使用獲取的數據動態創建選項，並填寫第二個選擇框。

$(document).on('change','select#1',function(){
var id = $(this).val();
$.ajax({
    method: 'POST',
    url: 'your-url',
    data: {'id' : id},
    success: function(data){

       //generate options dynamically
       $('select#2').html('');  
       $('select#2').html('the options you generated');
    }
});

}）;

Answer 3

您可以在<select id="1">上應用選擇更改的事件，並在事件觸發時動態填充<select id="2"> 。 正確命名您選擇的元素也將有所幫助，以便於識別。

根據另一個選擇顯示一個選擇的下拉值

問題描述

3 個解決方案

解決方案1
3 已采納 2017-03-01 05:52:53

解決方案2
0 2017-03-01 06:56:11

解決方案3
-1 2017-03-01 05:50:18

根據另一個選擇顯示一個選擇的下拉值

問題描述

3 個解決方案

解決方案1 3 已采納 2017-03-01 05:52:53

解決方案2 0 2017-03-01 06:56:11

解決方案3 -1 2017-03-01 05:50:18

解決方案1
3 已采納 2017-03-01 05:52:53

解決方案2
0 2017-03-01 06:56:11

解決方案3
-1 2017-03-01 05:50:18