Select item in drop down list js-CodePudding

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" >
                                    <li>
                        <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate6" value="flat_rate:6"  checked="checked"><label for="shipping_method_0_flat_rate6">Verzenden: <span ><bdi><span >€</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" ><label for="shipping_method_0_local_pickup4">Afhalen</label>                   </li>
                            </ul>
                        
        
            </td>
      
      
      
      
      <div >
    
    
        

    
    <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  id="coderockz_woo_delivery_delivery_selection_box_field" data-priority=""><label for="coderockz_woo_delivery_delivery_selection_box" >Methode&nbsp;<abbr  title="verplicht">*</abbr></label><span ><form autocomplete="off" ><select name="coderockz_woo_delivery_delivery_selection_box" id="coderockz_woo_delivery_delivery_selection_box"  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  dir="ltr" style="width: auto;"><span ><span  aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-coderockz_woo_delivery_delivery_selection_box-container" role="combobox"><span  id="select2-coderockz_woo_delivery_delivery_selection_box-container" role="textbox" aria-readonly="true"><span >Methode</span></span><span  role="presentation"><b role="presentation"></b></span></span></span><span  aria-hidden="true"></span></span></form></span></p></div><div id="coderockz_woo_delivery_pickup_date_section" style="display:none;"><p  id="coderockz_woo_delivery_pickup_date_datepicker_field" data-priority=""><label for="coderockz_woo_delivery_pickup_date_datepicker" >Pickup Date&nbsp;<abbr  title="verplicht">*</abbr></label><span ><input type="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 ></div></div></div>

CodePudding user response：

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" >
    <li>
      <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate6" value="flat_rate:6"  checked="checked"><label for="shipping_method_0_flat_rate6">Verzenden: <span ><bdi><span >€</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" ><label for="shipping_method_0_local_pickup4">Afhalen</label> </li>
  </ul>


</td>




<div >





  <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  id="coderockz_woo_delivery_delivery_selection_box_field" data-priority=""><label for="coderockz_woo_delivery_delivery_selection_box" >Methode&nbsp;<abbr  title="verplicht">*</abbr></label><span >
          <form autocomplete="off" ><select name="coderockz_woo_delivery_delivery_selection_box" id="coderockz_woo_delivery_delivery_selection_box"  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  dir="ltr" style="width: auto;"><span ><span  aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-coderockz_woo_delivery_delivery_selection_box-container" role="combobox"><span  id="select2-coderockz_woo_delivery_delivery_selection_box-container" role="textbox" aria-readonly="true"><span >Methode</span></span><span  role="presentation"><b role="presentation"></b></span></span></span><span  aria-hidden="true"></span></span></form>
        </span></p>
    </div>
    <div id="coderockz_woo_delivery_pickup_date_section" style="display:none;">
      <p  id="coderockz_woo_delivery_pickup_date_datepicker_field" data-priority=""><label for="coderockz_woo_delivery_pickup_date_datepicker" >Pickup Date&nbsp;<abbr  title="verplicht">*</abbr></label><span ><input type="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 ></div>
  </div>
</div>

CodePudding user response：

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" >
  <li>
    <label><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate6" value="flat_rate:6"  checked="checked">Verzenden: <span ><bdi><span >€</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" >Afhalen</label></li>
</ul>

<select name="coderockz_woo_delivery_delivery_selection_box" id="coderockz_woo_delivery_delivery_selection_box"  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>