弹出前第二个下拉菜单，具有与第一个下拉列表匹配的数组值 [英] Pre-pop second dropdown with matched array values from first dropdown

问题描述

我有2个selects，其中第一个是从我单击行中的datatable列值中预先填充的.

I have 2 selects which the first one is pre-populated from my datatable column values on button click from the row.

我现在需要使用与选定的第一个选项匹配但仍在挣扎中的可用值来预弹出第二个select.

I need to now pre-pop the second select with the available values that match the selected first option but struggling.

所有JQuery代码

// Table row 'Modify' button click from 'Existing Content' table
$('#selectedDialPlanDataTable').on('click', 'button[name="modifyContentButton"]', function () {  
    // Populates 'Option' dropdown
    let selectedData = selectedDialPlanDataTable.data();

    for (var i = 0; i < selectedData.length; i++) {
        var selectedDataOption = selectedData[i].option;

        if (selectedDataOption == 'start') {
            selectedDataOption = 's';
        }
        //console.log(selectedData)
        $('#modDelOptDropDown').append('<option value="' + selectedDataOption + '">' + selectedData[i].option + '</option>');
    }

    // Removes duplicates from 'Option' dropdown
    var selectedOption = {};
    $('#modDelOptDropDown > option').each(function () {
        if (selectedOption[this.text]) {
            $(this).remove();
        } else {
            selectedOption[this.text] = this.value;
        }
    });
})

// Load 'Existing Dial Plan Content' datatable
function selectedDialPlanButtonClick() {
    selectedDialPlanDataTable = $('#selectedDialPlanDataTable')
        .DataTable({
            "ordering": false,
            "searching": false,
            "paging": false,
            "info": false,
            'ajax': {
                "type": 'GET',
                "url": '../_IncomingCallCode/jsons/existingDataPlanData.json',
                "data": function (data) {
                    return data;
                },
                "error": function () {
                    $('#selectedDialPlanDataTable_wrapper').hide();
                    $('#existingRuleLoadErrorMessage').html(
                        '<p>There was an issue retrieving the existing content for <b>' + telNumberSelected + '</b>. Please try again.</p>'
                        + '<p>If the error keeps occurring, please get in touch.</p>').addClass('text-danger');
                }
            },
            "columns": [
                { "data": "option" },
                { "data": "priority" },
                { "data": "dialPlanFeature" },
                { "data": "appdata" }
            ],
            "destroy": true
        });
}

屏幕截图

单击铅笔按钮

展开的预弹出选择"(从代码提供中选择)

基本上我需要如果单击编辑"按钮以使其为"2"，则优先级select应该与option s 1-5

Basically i need if the 'Edit' button was clicked for '2' then the priority select should pre-pop with options 1-5

我有这个工作onchange，下面的代码只是在单击初始button时遇到了麻烦

I have this working onchange with the following code just struggling with when the initial button is clicked

更改代码

// Pre-pop's 'Prioriy when 'Modify' button is clicked then the 'Option' dropdown changed
$('#modDelOptDropDown').on('change', function () {
    $('#priorityDropdown').children('option').remove();

    let tableData = selectedDialPlanDataTable.data().toArray();
    //console.log(tableData)
    tableData = tableData.filter(({ option, priority }) => (priority == $('#priorityDropdown').val() || !$('#priorityDropdown').val() || !$(this).val()) &&
        (option == $('#modDelOptDropDown').val() || !$('#modDelOptDropDown').val() || !$(this).val()));

    //console.log(tableData)

    for (var i = 0; i < tableData.length; i++) {
        //console.log(tableData[i].priority)
        $('#priorityDropdown').append('<option value="' + tableData[i].priority + '">' + tableData[i].priority + '</option>');
    }
});

阵列详细信息

推荐答案

要扩展我的评论，这是我在考虑的问题:(假设您可以更改HTML并将data-option="X"添加到[name="modifyContentButton"]按钮)

To expand on my comment this is what I was thinking about: (assuming you can change your HTML to add the data-option="X" to your [name="modifyContentButton"] buttons)

// Table row 'Modify' button click from 'Existing Content' table
$('#selectedDialPlanDataTable').on('click', 'button[name="modifyContentButton"]', function () {  

    let clicked_opt = $(this).data("option");
    if(clicked_opt == 'start') clicked_opt = 's';

    // Populates 'Option' dropdown
    let selectedData = selectedDialPlanDataTable.data();

    var selectedOption = {};
    for (var i = 0; i < selectedData.length; i++) {
        var selectedDataOption = selectedData[i].option;

        if (selectedDataOption == 'start') {
            selectedDataOption = 's';
        }

        if(!selectedOption[selectedDataOption]){
            selectedOption[selectedDataOption] = true;
            //console.log(selectedData)
            $('#modDelOptDropDown').append('<option value="' + selectedDataOption + '"' +(selectedDataOption == clicked_opt ? ' selected' : '')+ '>' + selectedData[i].option + '</option>');
        }
    }

    // Populates 'Priority' dropdown
    let tableData = selectedData.toArray();
    //console.log(tableData)
    tableData = tableData.filter(({ option}) => (option == clicked_opt));

    //console.log(tableData)

    for (var i = 0; i < tableData.length; i++) {
        //console.log(tableData[i].priority)
            $('#priorityDropdown').append('<option value="' + tableData[i].priority + '">' + tableData[i].priority + '</option>');
    }

})

我还在一个循环中组合了总体，并重复检查了您的选项"下拉列表.

I also combined in a single loop the population and duplicate check for your Option dropdown.

我还在$('#modDelOptDropDown').append中添加了+(selectedDataOption == clicked_opt ? ' selected' : '')+以预选该行的选项.

I also added +(selectedDataOption == clicked_opt ? ' selected' : '')+ in $('#modDelOptDropDown').append to preselect the option of the row.

最后，将tableData.filter更改为仅使用相应选项获取数据.

And finally, changed tableData.filter to only grab the the data with corresponding option.

编辑:定义了clicked_opt变量，并添加了检查&替换为start选项

defined clicked_opt variable and added check & replace for the start option

Edit2:修正了我的一个错误(我在selectedOption[]中使用了this.value)

fixed a mistake on my part (I was using this.value in selectedOption[])

这篇关于弹出前第二个下拉菜单，具有与第一个下拉列表匹配的数组值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！