Select item in drop down list js

Question

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.

thanks in advance for your help

 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&nbsp;<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&nbsp;<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="[&quot;0&quot;,&quot;6&quot;]" 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>

Answer 1

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 index

 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. } document.getElementById("coderockz_woo_delivery_delivery_selection_box").selectedIndex = this;getAttribute('data-index'); } };

 <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="1" 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&nbsp;<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="delivery" selected="selected">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&nbsp;<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="[&quot;0&quot;,&quot;6&quot;]" 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>

Answer 2

Since 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 the sel element:

 const doWhat = { "flat_rate:6": "delivery", "local_pickup:4": "pickup" }; const sel = document.getElementById("coderockz_woo_delivery_delivery_selection_box"); document.getElementById("shipping_method").addEventListener("change", ev => { sel.value = doWhat[ev.target.value] })

 <ul id="shipping_method" class="woocommerce-shipping-methods"> <li> <label><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">Verzenden: <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>5.95</bdi></span></label></li> <li> <label><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup4" value="local_pickup:4" class="shipping_method">Afhalen</label></li> </ul> <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>