javascript - 从下拉列表一中选择，根据下拉列表一中的值删除选择选项

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>