從下拉列表中選擇特定選項時，選中相應的復選框？

Question

小提琴

我很遺憾地問這個問題，我討厭在這里詢問，我不想被視為吸血鬼，但我對此非常困惑，我認為我根本不在正確的位置，如果這對所有評論都沒有意義，我會嘗試解釋。 我很絕望！

基本上我正在做的工作要求你選擇一家公司，當你這樣做時，它會生成一些復選框。 從下拉列表中選擇配置文件時，需要勾選相應的復選框。 它應勾選的復選框是該配置文件中的所有內容的PRIVILEGE_PROFILES.PRIVILEGE CODES（這些是復選框）。

我在這里得到了我的代碼http://jsfiddle.net/shaunyweasel/dj8jr19e/5/ 。 陣列位於小提琴的頂部。 我試圖這樣做，以便如果標簽的文本值等於SEC_PRIVILEGES.Name然后勾選那些復選框，但這不是真的有效，所以我不確定是否有更好的方法來解決它。 下面的方法是我一直在嘗試讓它勾選復選框，但我很確定它是錯的。

$(document).on('change', '#select_profile', function () {


var select = $("#select_profile option:selected").text(),
    selectedProfile, privileges, div, label, access;

var checked = document.getElementsByTagName('input');

for (var i = 0; i < checked.length; i++) {
    if (checked[i].type == 'checkbox') {
        checked[i].checked = false;
    }
}

if (select !== 'None') {

    for (var i = 0; i < PRIVILEGE_PROFILES.length; i++) {
        if (PRIVILEGE_PROFILES[i].PROFILE_ID === select) {
            selectedProfile = PRIVILEGE_PROFILES[i];
            privileges = selectedProfile.PRIVILEGE_CODE;
        }
    }


    for (var i = 0; i < SEC_Privileges.length; i++) {
        if (privileges[i] === SEC_Privileges[i].Unique_Code) {

            console.log(privileges);
            var labels = document.getElementsByTagName('label');
            var checked = document.getElementsByTagName('input');

            for (var c = 0; c < checked.length; c++) {
                if (SEC_Privileges[i].Name == labels) {
                    checked[c].checked = true;
                }
            }

        }

    }
}

  });

如果這沒有意義，這里有一步一步說明它的運作方式以及我所處的位置：

1. 用戶從company_selection下拉列表中選擇一個公司

2. 選擇公司后，它會為該公司生成復選框，具體取決於它的COMPANY_PRIVILEGES.UNIQUE_CODE（數組）

3. 然后，用戶必須從profile_selection中選擇一些內容，並根據它們選擇的配置文件，它將檢查相應的復選框，具體取決於它具有的PRIVILEGE_PROFILES.PRIVILEGE_CODES。 （所以如果你選擇了Crew，那么它只會勾選View Tyrell框，因為它是它唯一的配置文件）

Answer 1

以下是工作示例： DEMO

我改變了以下事情：

1）當您創建復選框時，我已將類名添加到類似於UNIQUE_CODE復選框中

$(document).on('change', '#select_company', function () {

        // declare variables before the function
        var select = $("#select_company option:selected").text(),
            selectedProfile, privileges, div, label, access;

        // remove access checkboxes from previously selected profile
        $('.apps input[type=checkbox]').remove();
        $('.apps label').remove();

        // if the selected option is 'None', do nothing, else...
        if (select !== 'None') {

            // match the selected profile in the dropdown with the JS PROFILES object
            for (var i = 0; i < COMPANY_PRIVILEGES.length; i++) {
                if (COMPANY_PRIVILEGES[i].COMPANY_CODE === select) {
                    selectedProfile = COMPANY_PRIVILEGES[i];
                    privileges = selectedProfile.UNIQUE_CODE;
                }
            }
            // match the associated privileges from the profile within the entire privilege list
            for (var j = 0; j < privileges.length; j++) {
                for (var i = 0; i < SEC_Privileges.length; i++) {
                    if (privileges[j] === SEC_Privileges[i].Unique_Code) {
                        // get the div with the id === SEC_Privileges[i].Group_code
                        div = document.getElementById(SEC_Privileges[i].Group_Code);
                        access = document.createElement('input');
                        access.type = 'checkbox';
                        access.className  = SEC_Privileges[i].Unique_Code;
                        label = document.createElement('label');
                        // create a textnode with the unique code from the privileges
                        label.appendChild(document.createTextNode(SEC_Privileges[i].Name));
                        div.appendChild(label);
                        div.appendChild(access);

                    }
                }
            }
        }
    });

2）編寫簡單的函數來檢查基於類名的復選框：

$(document).on('change', '#select_profile', function () {
    var selectedValue = $("#select_profile option:selected").text(),
    selectedProfile, privileges, div, label, access;

    console.log(selectedValue);
    for (var i = 0; i < PRIVILEGE_PROFILES.length; i++) {
        if (PRIVILEGE_PROFILES[i].PROFILE_ID === selectedValue) {
            privileges = PRIVILEGE_PROFILES[i].PRIVILEGE_CODE;
        }
    }
    for(var j = 0; j < privileges.length; j++) {
     $('.'+privileges[j]).attr("checked", "true");   
    }


});

Answer 2

你有沒有在你的代碼中使用jQuery選擇器的原因？

無論如何，我已經做了一個更新來解決你的問題（不使用jQuery） http://jsfiddle.net/dj8jr19e/7/

主要問題是您沒有為復選框設置任何ID。 我已經設置了與您的特權的Unique_Code相對應的ID 。

access.id = SEC_Privileges[i].Unique_Code;

然后，當您從所選配置文件中迭代關聯的權限時，我只使用了getElementById因為privileges包含Unique_Code用作復選框的ID。