I would love to select a value from the drop-down list (Methode) based on the value ("Verzenden", "Afhalen").
So if I select verzenden I want to select verzenden in the dropdown
and if I select afhalen I want to select afhalen in the dropdown.
var rad = document.querySelectorAll('input[type=radio][name="shipping_method[0]"]');
var prev = null;
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = function () {
(prev)? console.log(prev.value):null;
if(this !== prev) {
prev = this;
}
console.log(this.value)
}
};
<td data-title="Verzending">
<ul id="shipping_method" class="woocommerce-shipping-methods">
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate6" value="flat_rate:6" class="shipping_method" checked="checked"><label for="shipping_method_0_flat_rate6">Verzenden: <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>5.95</bdi></span></label> </li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup4" value="local_pickup:4" class="shipping_method"><label for="shipping_method_0_local_pickup4">Afhalen</label> </li>
</ul>
</td>
<div class="woocommerce-additional-fields">
<div data-today_date="2021-12-23" id="coderockz_woo_delivery_setting_wrapper"><div id="coderockz_woo_delivery_delivery_selection_field" style="display: block;"><p class="form-row coderockz_woo_delivery_delivery_selection_box form-row-wide validate-required" id="coderockz_woo_delivery_delivery_selection_box_field" data-priority=""><label for="coderockz_woo_delivery_delivery_selection_box" class="">Methode <abbr class="required" title="verplicht">*</abbr></label><span class="woocommerce-input-wrapper"><form autocomplete="off" class="coderockz_woo_delivery_chrome_off_autocomplete"><select name="coderockz_woo_delivery_delivery_selection_box" id="coderockz_woo_delivery_delivery_selection_box" class="select select2-hidden-accessible" data-allow_clear="true" data-placeholder="Methode" tabindex="-1" aria-hidden="true">
<option value="" selected="selected"></option><option value="delivery">Vezend</option><option value="pickup">Afhalen</option>
</select><span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-coderockz_woo_delivery_delivery_selection_box-container" role="combobox"><span class="select2-selection__rendered" id="select2-coderockz_woo_delivery_delivery_selection_box-container" role="textbox" aria-readonly="true"><span class="select2-selection__placeholder">Methode</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span></form></span></p></div><div id="coderockz_woo_delivery_pickup_date_section" style="display:none;"><p class="form-row coderockz_woo_delivery_pickup_date_field form-row-wide validate-required" id="coderockz_woo_delivery_pickup_date_datepicker_field" data-priority=""><label for="coderockz_woo_delivery_pickup_date_datepicker" class="">Pickup Date <abbr class="required" title="verplicht">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="coderockz_woo_delivery_pickup_date_field" id="coderockz_woo_delivery_pickup_date_datepicker" placeholder="Pickup Date" value="" data-pickup_selectable_dates="365" data-pickup_disable_week_days="["0","6"]" data-pickup_date_format="F j, Y" data-pickup_disable_dates="[]" data-pickup_week_starts_from="1" data-pickup_default_date="1"></span></p></div><div class="coderockz-woo-delivery-loading-image"></div></div></div>
2
Answers
If you are not using the
data-index
attribute on each input you can give those the index values of those in your dropdown.document.getElementById("coderockz_woo_delivery_delivery_selection_box").selectedIndex = this.getAttribute('data-index')
and it will select the dropdown to the matching indexSince you copied and pasted the markup from your shop page there is a lot of irrelevant stuff in the snippet which I removed here. The script itself can be very simple: a delegated event listener watches over any "change" events (which can only happen on the radio button elements). It then performs the action as defined in the object
doWhat
on thesel
element: