Member 8090436 Ответов: 1

Как заполнить второй выпадающий список на основе первой части значения выпадающего списка в javascript?

У меня есть буксировка следующих выпадающих списков, и я хочу заполнить второй выпадающий список на основе первого значения выпадающего списка.


<select id="iFunction" name="nFunction">
<option value="-1" selected="">Select…</option>
<option value="1">Drilling</option>
<option value="2">Gas</option>

<select id="iOperation" name="nOperation">
<option value="-1" selected="">Select…</option>
<option value="1_21">Drill1</option>
<option value="1_22">Drill2</option>
<option value="2_21">Compression</option>
<option value="2_22">Dehydration</option>
</select>



Когда я нажимаю опцию сверления в раскрывающемся списке iFunction, то я хочу заполнить Drill1 и Drill2 в другом раскрывающемся списке на основе 1 общего в обоих раскрывающихся списках.

Может ли кто-нибудь предложить мне подойти?

Спасибо.

Что я уже пробовал:

i have tried many approach provided in google

1 Ответов

Рейтинг:
6

Karthik_Mahalingam

пробовать

<!DOCTYPE html>
<html>
<head>
    <script>

        function changeddl(obj) {

            var text = obj.options[obj.selectedIndex].text;
            var ddl2 = document.querySelectorAll('#iOperation option');
            for (var i = 1; i < ddl2.length; i++) {
                var option = ddl2[i];
                option.style.display = 'none';
                if (text == 'Drilling') {
                    if (['Drill1', 'Drill2'].indexOf(option.text) > -1)
                        option.style.display = 'block'

                }
                if (text == 'Gas') {
                    if (['Compression', 'Dehydration'].indexOf(option.text) > -1)
                        option.style.display = 'block'
                }
            }
        }

    </script> 
</head>
<body>
    <select id="iFunction" name="nFunction" onchange="changeddl(this)">
        <option value="-1" selected="">Select…</option>
        <option value="1">Drilling</option>
        <option value="2">Gas</option>
    </select>


    <select id="iOperation" name="nOperation">
        <option value="-1" selected="">Select…</option>
        <option value="1_21">Drill1</option>
        <option value="1_22">Drill2</option>
        <option   value="2_21">Compression</option>
        <option value="2_22">Dehydration</option>
    </select>

  



</body>
</html>


Демонстрация:Плунжер[^]

Member 8090436

Да. Большое спасибо за ответ.

Karthik_Mahalingam

добро пожаловать