javascript - 在 radio 和选择之间同步当前选定的项目

Question

简短版本
我有两种形式。一种带有单选按钮，一种带有下拉菜单(选择)。
两者具有相同的结构。例如，如果单选按钮的值发生变化，下拉对应项应更改为相同的值。

限制:
每个单选和选择的 ID 和 name 属性是随机的。后端将生成一些随机值。所以我无法使用它们。很乱，我知道。但我无法改变这一点。
唯一不会改变的是 CSS 类。

这是我已经得到的:
我给每个选择和每个单个单选按钮一个明确值的类:

// All Mobile Selects
var $mobRechnung = $mobile.find('.js-notification-set--rechnung'),
    $mobJahr = $mobile.find('.js-notification-set--jahr'),
    $mobMonat = $mobile.find('.js-notification-set--monat'),
    $mobErinnerung = $mobile.find('.js-notification-set--erinnerung');

// All Desktop Radios
var $deskRechnungBrief = $desktop.find('js-notification-set--rechnung-brief'),
    $deskRechnungMail = $desktop.find('js-notification-set--rechnung-mail'),

    $deskJahrBrief = $desktop.find('js-notification-set--jahr-brief'),
    $deskJahrMail = $desktop.find('js-notification-set--jahr-mail'),
    $deskJahrNo = $desktop.find('js-notification-set--jahr-no'),

    $deskMonatMail = $desktop.find('js-notification-set--monat-mail'),
    $deskMonatSMS = $desktop.find('js-notification-set--monat-sms'),
    $deskMonatNo = $desktop.find('js-notification-set--monat-no'),

    $deskErinnerungMail = $desktop.find('js-notification-set--erinnerung-mail'),
    $deskErinnerungSMS = $desktop.find('js-notification-set--erinnerung-sms'),
    $deskErinnerungNo = $desktop.find('js-notification-set--erinnerung-no');

如您所见，我无法组合单选按钮，因为我无法使用它们的名称。因此，我需要为每个值提供一个单独的类来分隔它们。

然后我想我将它们放入数组中并使用 jQuery.map() 循环它们，但现在我陷入了困境。我不知道如果不用代码写一本小说我应该如何继续......

如果您需要更多代码，请告诉我。

编辑 HTML 标记:
桌面代码示例。每行的构建方式都是相同的。

<div class="js-notification-set--desk>
   {# Rechnung Row #}
        <div class="row">
            <fieldset>
                <legend class="col-sm-3">Rechnung</legend>

                {# Brief Radio #}
                <div class="mod-formelem col-sm-1">
                    <input type="radio" id="__radio1__" name="__row1__" class="js-notification-set--rechnung-brief" aria-labelledby="__sr01__"/>
                    <label for="__radio1__" class="mod-formelem--icon" aria-hidden="true"></label>
                </div>

                {# E-Mail Radio #}
                <div class="mod-formelem col-sm-1">
                    <input type="radio" id="__radio2__" name="__row1__" class="js-notification-set--rechnung-mail" checked="checked"
                           aria-labelledby="__sr02__"/>
                    <label for="__radio2__" class="mod-formelem--icon" aria-hidden="true"></label>
                </div>
            </fieldset>
        </div>
(...)
     </div>

注意:aria-labelledby 声明每个单选按钮的标签。这些按钮位于类似表格的网格中，其中标签位于表格的顶部。所以不存在定向链接标签。

移动选择示例:

<div class="js-notification-set--mob">
   {# Rechnung Row #}
        <div class="row">
            <div class="col-sm-4">
                <label for="___select1___" class="control-label">
                    Rechnung
                </label>
            </div>
            <div class="col-sm-8 js-tooltip--container">
                {# select1 #}
                <select data-select-type="default" data-placeholder="Rechnung"
                        class="form-control js-select js-notification-set--rechnung" name="Rechnung" id="___select1___">
                    <option value="___select1_option1___">Brief</option>
                    <option value="___select1_option2___" selected>E-Mail</option>
                </select>
            </div>
        </div>
(...)
</div>

Answer 1

使用单选按钮的索引来选择<select>中的相应选项。 .

$(".js-notification-set--desk :radio").click(function() {
    var index = $(".js-notification-set--desk :radio").index(this);
    $(".js-notification-set--rechnung").prop('selectedIndex', index);
});