從下拉菜單一中選擇，從下拉菜單一中刪除基於值的選擇選項

Question

我們使用帶有內容的下拉菜單選擇一個機場及其航站樓，然后使用另一個下拉菜單選擇該機場和終端內的服務。 例如機場1和國際航站樓。 現在，某些機場和航站樓不包含任何服務。 選擇該機場和航站樓后，應刪除選擇選項，並且不提供任何服務等，或者在這些路線上提供某些東西

這么遠的編輯代碼

//form one
<select class="req input-disabled" name="ddlairport_terminal" id="ddlairport_terminal">
    <option value="">Airport terminal</option>
    <option value="92|138">Suvarnabhumi International</option>
    <option value="92|135">Suvarnabhumi Domestic</option>
    <option value="93|138">Don Mueang International</option>
    <option value="93|135">Don Mueang Domestic</option>
</select>

<select class="req input-disabled" name="ddltransit" id="ddltransit">
    <option value="">Choose a service</option>
</select>

//form 2
<select class="req input-disabled" id="ret_ddlairport_terminal" name="ret_ddlairport_terminal">
    <option value="">Airport terminal</option>
    <option value="92|138">Suvarnabhumi international</option>
    <option value="92|135">Suvarnabhumi domestic</option>
    <option value="93|138">Don muang international</option>
    <option value="93|135">Don muang domestic</option>
</select>

<select class="req input-disabled" name="ret_ddltransit" id="ret_ddltransit">
    <option value="">Choose a service</option>
</select>

這是我的javascript

// airport service tab
var allservices = '<option value="">Choose a service</option><option value="110">Arrival</option><option value="111">Departure</option><option value="Gate to gate">Gate to gate (Transit)</option>';
var partialserviceairports = ["93|135","93|138"];
var airportservicemapping = {"93|135":["110","Gate to gate"],"93|138":["110","Gate to gate"]};
var servicenamemapping = {"110":"Arrival","111":"Departure","Gate to gate": "Gate to gate (Transit)"};
$(document).ready(function(){
    $("select#ddlairport_terminal").on('change',function(){
        var selectedval = $(this).val();
        var servieces = "";
        if(!selectedval || partialserviceairports.indexOf(selectedval)>-1)
        {
            $("select#ddltransit").html(getOptions(selectedval));
        }
        else
        {
            $("select#ddltransit").html(allservices);
        }

    });
    $("select#ret_ddlairport_terminal").on('change',function(){
        var selectedval = $(this).val();
        var servieces = "";
        if(!selectedval || partialserviceairports.indexOf(selectedval)>-1)
        {
            $("select#ret_ddltransit").html(getOptions(selectedval));
        }
        else
        {
            $("select#ret_ddltransit").html(allservices);
        }

    });

    function getOptions(airportvalue)
    {
        var options = airportservicemapping[airportvalue];
        var optionshtml = "";
        for(var value in options)
        {
            var key = options[value];
            optionshtml += '<option value="'+key+'">'+servicenamemapping[key]+'</option>';
        }
        optionshtml = '<option value="">Choose a service</option>' + optionshtml;
        return optionshtml;
    }
});

Answer 1

這就是您可能想要的。

 var partialserviceairports = ["93|135","93|138"]; var airportservicemapping = {"93|135":["110","Gate to gate"],"93|138":["110","Gate to gate"]}; var servicenamemapping = {"110":"Arrival","111":"Departure","Gate to gate": "Gate to gate"}; var disabledoptions = {"ret_ddltransit":["Gate to gate"]}; $(document).ready(function(){ $("select#ddlairport_terminal").on('change',function(){ var selectedval = $(this).val(); var servieces = ""; if(!selectedval || partialserviceairports.indexOf(selectedval)>-1) { $("select#ddltransit").html(getOptions(selectedval)); } else { $("select#ddltransit").html(getAllServices()); } }); $("select#ret_ddlairport_terminal").on('change',function(){ var selectedval = $(this).val(); var servieces = ""; if(!selectedval || partialserviceairports.indexOf(selectedval)>-1) { $("select#ret_ddltransit").html(getOptions(selectedval,"ret_ddltransit")); } else { $("select#ret_ddltransit").html(getAllServices()); } }); function getAllServices() { var services = ""; for(var key in servicenamemapping) { services += '<option value="'+key+'">'+servicenamemapping[key]+'</option>'; } services = '<option value="">Choose a service</option>' + services; return services; } function getOptions(airportvalue,selectid) { var options = airportservicemapping[airportvalue]; var optionshtml = ""; for(var value in options) { var key = options[value]; optionshtml += '<option value="'+key+'"'; if(selectid && disabledoptions[selectid] && disabledoptions[selectid].indexOf(key)>-1) { optionshtml += 'disabled'; } optionshtml+='>'+servicenamemapping[key]+'</option>'; } optionshtml = '<option value="">Choose a service</option>' + optionshtml; return optionshtml; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="req input-disabled" id=ddlairport_terminal name="ddlairport_terminal"> <option value="">Airport terminal</option> <option value="92|138">Suvarnabhumi international</option> <option value="92|135">Suvarnabhumi domestic</option> <option value="93|138">Don muang international</option> <option value="93|135">Don muang domestic</option> <option value="94|138">Chennai international</option> <option value="94|135">Chennai domestic</option> </select> <select class="req input-disabled" name="ddltransit" id="ddltransit"> <option value="">Choose a service</option> </select> <select class="req input-disabled" id="ret_ddlairport_terminal" name="ret_ddlairport_terminal"> <option value="">Airport terminal</option> <option value="92|138">Suvarnabhumi international</option> <option value="92|135">Suvarnabhumi domestic</option> <option value="93|138">Don muang international</option> <option value="93|135">Don muang domestic</option> </select> <select class="req input-disabled" name="ret_ddltransit" id="ret_ddltransit"> <option value="">Choose a service</option> </select>