Вложение более двух динамических c выпадающих с HTML и Javascript - PullRequest
Новая
       0

Вложение более двух динамических c выпадающих с HTML и Javascript

0 голосов
/ 29 января 2020

Я видел множество способов поиска, чтобы сделать это, но я не знаком с большинством языков, используемых в них. Я знаю самые основы HTML и очень мало javascript.

Я пытаюсь создать простую одностраничную демонстрацию для моего руководства о "ролодексе", которую можно использовать для детализации, чтобы найти людей, ответственных за определенные функциональные области компании. В связи с этим я хотел бы использовать раскрывающиеся списки, чтобы перейти от 30-тысячного обзора организаций к более управляемому уровню, а затем осуществлять поиск по ключевым словам. Ключевые слова не являются частью этого запроса - только вложенные динамические выпадающие списки c.

Я успешно выполнил 1-ое и 2-ое выпадающие выпадающие списки, которые изменяют результаты в зависимости от выбора в первом , То, на чем я застрял, - это попытка продолжить этот путь до 3-го и 4-го выпадающих выпадений.

Я полагаю, что проблема может быть ie в моем классе Div третьего уровня, но не может понять если это просто не разрешено или я делаю что-то не так с этим. Любые предложения приветствуются. 

<!DOCTYPE html>
<html>

<head>
  <title>Rolodex 2.0</title>
</head>

<body>

  <h1>Rolodex 2.0</h1>
  <p>This is a conceptual design for how to find who does what</p>
  <p><i>This could be integrated into the existing People search, or the Assistant</p>

</head>
    <title>Rolodex 2.0</title>
    <body>
    <div class="category_div" id="category_div">1st Tier:
        <select id="1st Tier" name="1st Tier" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
        <option value="Select an option">Select an option</option>
        <option value="1ERP Accounting">1ERP Accounting</option>
        <option value="Consumer Revenue Accounting">Consumer Revenue Accounting</option>
        <option value="Controlling and Reporting">Controlling and Reporting</option>
        <option value="SPC3 Accounting">SPC3 Accounting</option>
        <option value="International Accounting">International Accounting</option>
        </select>
    </div>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript">
    function dynamicdropdown(listindex)
    {
        switch (listindex)
        {
        case "1ERP Accounting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            break;
        case "Consumer Revenue Accounting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            break;
        case "Controlling and Reporting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            break;
        case "SPC3 Accounting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            document.getElementById("2nd Tier").options[1]=new Option("Benefits","benefits");
            document.getElementById("2nd Tier").options[2]=new Option("Salaries & Commissions","salaries & commissions");
            document.getElementById("2nd Tier").options[3]=new Option("Cash Accounting","cash accounting");
            document.getElementById("2nd Tier").options[4]=new Option("Acquistions & Divestitures","acquisitions & divestitures");
            document.getElementById("2nd Tier").options[5]=new Option("Connect","connect");
            break;
        case "International Accounting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            break;
        }
        return true;
    }
    </script>

    <div class="sub_category_div" id="sub_category_div">2nd Tier:
        <script type="text/javascript" language="JavaScript">
        document.write('<select name="2nd Tier" id="2nd Tier"><option value="">Select 1st Tier</option></select>')
        </script>
        <noscript>
        <select id="2nd Tier" name="2nd Tier">
            <option value="Select 1st Tier">Select 1st Tier</option>
        </select>
        </noscript>
    </div>    


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript">
    function dynamicdropdown2(listindex2)
    {
        switch (listindex2)
        {
        case "1ERP Accounting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            break;
        case "Consumer Revenue Accounting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            break;
        case "Controlling and Reporting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            break;
        case "SPC3 Accounting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            document.getElementById("2nd Tier").options[1]=new Option("Benefits","benefits");
            document.getElementById("2nd Tier").options[2]=new Option("Salaries & Commissions","salaries & commissions");
            document.getElementById("2nd Tier").options[3]=new Option("Cash Accounting","cash accounting");
            document.getElementById("2nd Tier").options[4]=new Option("Acquistions & Divestitures","acquisitions & divestitures");
            document.getElementById("2nd Tier").options[5]=new Option("Connect","connect");
            break;
        case "International Accounting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            break;
        }
        return true;
    }
    </script>    

    <div class="sub_category_div" id="sub_category_div">3rd Tier:
        <script type="text/javascript" language="JavaScript">
        document.write('<select name="3rd Tier" id="3rd Tier"><option value="">Select 2nd Tier</option></select>')
        </script>
        <noscript>
        <select id="3rd Tier" name="3rd Tier">
            <option value="Select 2nd Tier">Select 2nd Tier</option>
        </select>
        </noscript>
    </div>    


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript">
    function dynamicdropdown2(listindex2)
    {
        switch (listindex2)
        {
        case "1ERP Accounting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            break;
        case "Consumer Revenue Accounting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            break;
        case "Controlling and Reporting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            break;
        case "Salaries & Commissions" :
            document.getElementById("3rd Tier").options[0]=new Option("Select 2nd Tier","");
            document.getElementById("3rd Tier").options[1]=new Option("Benefits","benefits");
            document.getElementById("3rd Tier").options[2]=new Option("Salaries & Commissions","salaries & commissions");
            document.getElementById("3rd Tier").options[3]=new Option("Cash Accounting","cash accounting");
            document.getElementById("3rd Tier").options[4]=new Option("Acquistions & Divestitures","acquisitions & divestitures");
            document.getElementById("3rd Tier").options[5]=new Option("Connect","connect");
            break;
        case "International Accounting" :
            document.getElementById("2nd Tier").options[0]=new Option("Select 2nd Tier","");
            break;
        }
        return true;
    }
    </script>        
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...