JavaScriptで選択したセレクトボックスのchangeイベントを発火させたい

Question

ショッピングカート「MakeShop」の商品詳細ページをカスタマイズしています。
利用している「クリエイターモード」では商品オプションの選択項目がセレクトボックスで生成されるのですが、これをラジオボタンに変更したかった為

JavaScriptにて選択項目を取得 > ラジオボタン生成 > ラジオボタンに対応したoptionをselected=trueに
とすることで「インターフェイスはラジオボタンだけど実際に操作されているのはセレクトボックス」という状態にするところまでは実現できました。
選択自体は問題なくできているのですが、元々セレクトボックスに対して設定されているchangeイベントが発火せず、つまずいております。

該当のソースコード

<!-- MakeShopによって自動生成された範囲ここから -->
<div class="makeshop-option-wrap">
    <p class="makeshop-option-label">商品カラー選択</p>
    <label class="makeshop-option-select-wrap">
        <select data-id="makeshop-item-option1" class="makeshop-option-select">
            <option value="0" class="makeshop-option-select-item makeshop-option-select-title">--選択してください</option>
            <option value="1" class="makeshop-option-select-item">黒</option>
            <option value="2" class="makeshop-option-select-item">白</option>
    </select>
    </label>
</div>
<!-- 自動生成ここまで -->

<!-- インターフェイスとして作った範囲ここから -->
<div id="radiobuttonwrap">
    <input type="radio" name="rb0" id="r00" value="0">
        <label for="r00">--選択してください</label>
    <input type="radio" name="rb0" id="r01" value="1">
        <label for="r01">黒</label>
    <input type="radio" name="rb0" id="r02" value="2">
        <label for="r02">白</label>
</div>
<!-- インターフェイスここまで -->

window.onload = function(){
    document.querySelectorAll('label, input[type="radio"]').forEach(function(rb) {
        rb.addEventListener('click', function() {
            if (rb.checked === true) {
                var rbValue = this.value;
                var wrapIndex = this.name.slice(2);
                    //ラジオボタンを生成する時、name属性を「接頭辞rb+'.makeshop-option-wrap'のインデックス番号」で指定している為
                    //接頭辞をスライスして何番目のwrapに属すselectに反映させればいいかを取得しています
                var wrap = document.querySelectorAll('.makeshop-option-wrap')[wrapIndex];
                var op = wrap.querySelectorAll('.makeshop-option-select option');
                op[rbValue].selected = true;
            }
        }, false);
    });				
}

発火できないchangeイベント

<!-- MakeShopによる自動生成の為変更不可 -->
<input type="hidden" id="makeshop-page-item-option-data"
    data-brandcode="000000000002"
    data-id-option-prefix="makeshop-item-option"
    data-id-price="makeshop-item-price"
    data-id-price-excluded-tax="makeshop-item-price-excluded-tax"
    data-id-tax="makeshop-item-tax"
    data-id-point="makeshop-item-point"
>

// MakeShopによる自動生成の為変更不可
function initItemOption()
{
    var optionData = $('#makeshop-page-item-option-data');
    var optionIdPrefix = optionData.attr('data-id-option-prefix');
    var priceId = optionData.attr('data-id-price');
    var priceExcludedTaxId = optionData.attr('data-id-price-excluded-tax');
    var taxId = optionData.attr('data-id-tax');
    var pointId = optionData.attr('data-id-point');

    $('[data-id^="' + optionIdPrefix + '"]').on('change', function() {
    	var index = $('[data-id="' + $(this).attr('data-id') + '"]').index(this);
    	
        var optionList = [];
        $('[data-id^="' + optionIdPrefix + '"]').each(function() {
        	optionList.push($(this).val());
        });

        $.ajax({
            url: '/shop/item_info.html',
            type: 'POST',
            data: JSON.stringify({
            	'element_index': index,
                'item_code': optionData.attr('data-brandcode'),
                'option_list': optionList
            }),
            contentType: 'application/json',
            dataType: 'json'
        }).done(function(data) {
            $('[data-id="' + priceId + '"]').html(data.final_price);
            $('[data-id="' + priceExcludedTaxId + '"]').html(data.final_price_exculuded_tax);
            $('[data-id="' + taxId + '"]').html(data.final_tax);
            $('[data-id="' + pointId + '"]').html(data.final_point);
            
            if (typeof MakeShop_afterItemOptionChange === 'function') {
                var hookData = {
                    elementIndex: data.element_index,
                    isSoldout: data.is_soldout,
                    method: {
                        modal: openModalMessage
                    }
                };
                if (MakeShop_afterItemOptionChange(hookData) === false) {
                    return;
                }
            }
        });

        return false;
    }).eq(0).trigger('change');
}

input[type=hidden]にて設定されている「data-brandcode」は、商品ごとに自動生成されるユニークな番号ですが、他の属性については解らず固定の値かな？と思っています。

発火しないchangeイベントではjsonを使って選択肢ごとの在庫を調べているようなのですが
コピペ中心のJavaScript初心者であるのに加え、そもそもが変則的なことをしているので、なるべく色々な値を参照せずに表面的なカスタマイズに留めたく
セレクトボックスが変更された事を検知してさえくれれば、、と表題の質問とさせていただいた次第です。

ちなみに、changeイベントが発火したのは
セレクトボックスを直接操作して「選択肢が変更されたとき」のみでした。
例） 選択肢「黒」の商品が売り切れの場合
ラジオボタンで黒を選択してもsoldoutにならない
→ 黒と既に表示されたセレクトボックスをアクティブにして、そのまま黒を選択しなおしても変化なし
→ 白または「選択してください」が表示されている状態から、セレクトボックスで直接黒を選ぶとsoldoutになる

実際のページを提示できず大変恐縮ですが、お知恵を拝借できれば幸いです。
どうぞよろしくお願いいたします。

Answer 1

ラジオボタンのon('change')のなかで、所定のセレクトボックスをtrigger('change')してみては？

sample

<script>
$(function(){
  $('select').on('change',function(){
    console.log('select change:'+$(this).val());
  });
  $('#radiobuttonwrap').on('change',':radio',function(){
    $('select').val($(this).val()).trigger('change');
  });
});
</script>

<select data-id="makeshop-item-option1">
<option value="0">--選択してください</option>
<option value="1">黒</option>
<option value="2">白</option>
</select>

<div id="radiobuttonwrap">
<label><input type="radio" name="rb0" id="r00" value="0">--選択してください</label>
<label><input type="radio" name="rb0" id="r01" value="1">黒</label>
<label><input type="radio" name="rb0" id="r02" value="2">白</label>
</div>

Comments

[t8pda]

ご回答ありがとうございます！

$('#radiobuttonwrap').on('change', 'input[type="radio"]', function() {
$('select').trigger('change');
});
と書いてみましたが、うまくいきませんでした。
記述順のせいかと思い順番を色々と変えてみましたが変化がなかったので、
もう少し頂いたアドバイスについてしっかり調べた上で、再度チャレンジしてみようと思います。

この後2日程手を付けられないので間が空いてしまい恐縮ですが、後日改めてご報告させて頂きます!

[yambejp]

一応sampleつけておきました。動作確認してみてください

[t8pda]

sample本当にありがとうございます！
後日動作確認し改めてご報告いたしますので、取り急ぎお礼のみにて失礼いたします。

[t8pda]

頂いたsampleの動作確認をしてみました！
結果は「コンソールに "select change: (value)"は表示されるが、最終的に求めている(soldout表示)は出てこない」というものでした。
selectはちゃんとchangeしているので、問題は他のところにあるということですね...

おかげさまで一歩進むことができたのと、これ以上は何をご相談していいのやらという状況なので、
これにて閉じさせていただこうと思います。
ありがとうございました!