时间戳

首页 > 解决方案 > 从具有相同 id 的多个选择框中获取值

javascript - 从具有相同 id 的多个选择框中获取值

问题描述

我有三个选项 ID 相同但值不同的选择框。他们将存储名为id、nameuz、nameru的信息 3 列。我希望当我从一个选择框中选择时，另一个框也必须更改值。

<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>

我该如何解决这个问题。感谢您的帮助:)

标签： javascripthtmlselect

解决方案

看看这个片段：

<!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>

我们必须为每个人提供价值<option>。最后一个也<option>少了一个<select>。

我们正在调用recalibrate所有更改的函数<select>并将<select>当前更改为参数的传递。

在函数内部recalibrate，我们遍历<select>文档中的所有内容并将它们的selectedIndex属性值设置为 current<select>的selectedIndex值。

推荐阅读