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>

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

1 个答案: