TechQA.

Get values from multiple select boxes with same id

1k views Asked by At

I have three select boxes with same option id but different values. They will store informaion 3 column called id, nameuz, nameru. I want to that when i select from one select box, another boxes also must change values.

<select class="form-control select2-blue select" style="width: 100%;" name="catid" id="catid">
                                    <option selected="selected">Tanlang</option>
                                    <option id="1">0</option>
                                    <option id="2">1</option>
                                    <option id="3">3</option>
                                    <option id="4">5</option>
                                    <option id="5">6</option>
                                    <option id="6">6</option>
                                    <option id="7">10</option>
                                    <option id="8">71</option>
                                    <option id="9">72</option>
                                    <option id="10">92</option>
                                </select>


 <select class="form-control select2-blue select" style="width: 100%;" name="cat_uz" id="cat_uz">
                                    <option selected="selected">Tanlang</option>
                                    <option id="v1">SMS to'plam</option>
                                    <optgroup label="Internet">
                                    <option id="v2">Oylik</option>
                                    <option id="v3">Kunlik</option>
                                    <option id="v4">OnNet</option>
                                    <option id="v5">Tungi DRIVE</option>
                                    <option id="v6">Tungi internet</option>
                                    </optgroup>
                                    <option id="v7">Daqiqa to'plami</option>
                                    <option id="v8">Asosiy xizmatlar</option>
                                    <option id="v9">Pullik xizmatlar</option>
                                    <option id="v10">Raqam</option>
                                </select>

<select class="form-control select2-blue select" style="width: 100%;" name="cat_ru" id="cat_ru" readonly>
                                    <option selected="selected">Tanlang</option>
                                    <option id="v1">SMS-пакеты</option>
                                    <option id="v2">Месячные</option>
                                    <option id="v3">Суточные</option>
                                    <option id="v4">OnNet</option>
                                    <option id="v5">Ночной DRIVE</option>
                                    <option id="v6">Ночные</option>
                                    <option id="v7">Пакеты минут</option>
                                    <option id="v8">Базовые  услуги</option>
                                    <option id="v9">Платные услуги</option>
                                    <option id="v10">Номер</option>
                                </select>

How can I solve this. Thanks for helping :)

javascript html select
Original Q&A
1

There are 1 answers

1
gpl On BEST ANSWER

Check out this snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
    <div class="row">
        <div class="col-4">
            <label for="cat_uz">Bo'lim nomi UZ</label>
            <select class="select" name="cat_uz" id="cat_uz" onchange="recalibrate(this);">
                <option value="Tanlang" selected="selected">Tanlang</option>
                <option value="SMS to'plam" >SMS to'plam</option>
                <optgroup label="Internet">
                    <option value="Oylik" >Oylik</option>
                    <option value="Kunlik" >Kunlik</option>
                    <option value="OnNet" >OnNet</option>
                    <option value="Tungi DRIVE" >Tungi DRIVE</option>
                    <option value="Tungi internet" >Tungi internet</option>
                </optgroup>
                <option value="Daqiqa to'plami" >Daqiqa to'plami</option>
                <option value="Asosiy xizmatlar" >Asosiy xizmatlar</option>
                <option value="Pullik xizmatlar" >Pullik xizmatlar</option>
                <option value="Raqam" >Raqam</option>
            </select>
        </div>
        <div class="col-4">
            <label for="cat_ru">Bo'lim nomi RU</label>
            <select class="select" name="cat_ru" id="cat_ru" readonly onchange="recalibrate(this);">
                <option value="Tanlang" selected="selected">Tanlang</option>
                <option value="SMS-пакеты" >SMS-пакеты</option>
                <option value="Месячные" >Месячные</option>
                <option value="Суточные" >Суточные</option>
                <option value="OnNet" >OnNet</option>
                <option value="Ночной DRIVE" >Ночной DRIVE</option>
                <option value="Ночные" >Ночные</option>
                <option value="Пакеты минут" >Пакеты минут</option>
                <option value="Базовые услуги" >Базовые услуги</option>
                <option value="Платные услуги" >Платные услуги</option>
                <option value="Номер" >Номер</option>
            </select>
        </div>
        <div class="col-4">
            <label for="cat_kr">Bo'lim nomi KR</label>
            <select class="select" name="cat_kr" id="cat_kr" readonly onchange="recalibrate(this);">
                <option value="Tanlang" selected="selected">Tanlang</option>
                <option value="СМС тўплам" >СМС тўплам</option>
                <option value="Ойлик" >Ойлик</option>
                <option value="кунлик" >кунлик</option>
                <option value="OnNet" >OnNet</option>
                <option value="Тунги DRIVE" >Тунги DRIVE</option>
                <option value="Тунги интернет" >Тунги интернет</option>
                <option value="Дақиқа тўплами" >Дақиқа тўплами</option>
                <option value="Асосий хизматлар" >Асосий хизматлар</option>
                <option value="Пуллик хизматлар" >Пуллик хизматлар</option>
            </select>
        </div>
    </div>
    <script type="text/javascript">
        function recalibrate(select){
            $('select').each(function(){
                this.selectedIndex = select.selectedIndex;
            })
        }
    </script>
</body>
</html>

We must provide value to each <option>. Also there is one <option> missing in the last <select>.

We are calling function recalibrate on change of all <select> and pass <select> which is currently changed as parameter.

Inside the function recalibrate, we iterate through all the <select> in the document and set their selectedIndex property value to current <select>'s selectedIndex value.

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in SELECT

Popular Questions

Trending Questions