在下拉列表js中选择项目

Question

我希望根据值（“Verzenden”、“Afhalen”）从下拉列表 (Methode) 中选择一个值。

所以如果我选择 verzenden 我想在下拉列表中选择 verzenden 如果我选择 afhalen，我想在下拉列表中选择 afhalen。

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

由于您从商店页面复制并粘贴了标记，因此我在此处删除了 sn-p 中的许多不相关的内容。脚本本身可以非常简单：委托事件侦听器监视任何“更改”事件（只能在单选按钮元素上发生）。然后它在sel 元素上执行对象doWhat 中定义的操作：

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>

Answer 2

如果您没有在每个输入上使用data-index 属性，您可以为这些输入提供下拉列表中的索引值。 document.getElementById("coderockz_woo_delivery_delivery_selection_box").selectedIndex = this.getAttribute('data-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>