Select item in drop down list js - Woocommerce

Floortje123421
December 23, 2021
265 views
1 vote
2 Answers

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

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

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Select item in drop down list js – Woocommerce

Answers