jQuery根据另一个下拉列表的值填充下拉列表

时间：2017-08-23 17:12:57

标签： javascript jquery

＆＃13;
＆＃13; 
jQuery('select#pickup_location').on('change', function () {
  var selected = jQuery('#pickup_location option:selected').text();

  if (selected == 'The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM)') {
    jQuery('select#shipping_method_0').text('Pick Up - The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM) $0.00');
  } else if (selected=='Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM)') {
    jQuery('select#shipping_method_0').text('Pick Up - Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM) $0.00');
  }
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="shipping">
  <p class="form-row form-row " id="pickup_location_field" data-rules="" data-rules-action="" data-validations="">
  <label for="pickup_location" class="">Pick Up Location</label>
  <select name="pickup_location" id="pickup_location" class="select thwcfe-input-field thwcfe-enhanced-select" data-allow_clear="true" data-placeholder="Please choose a pick up location">
    <option value="" selected='selected'></option>
    <option value="flat_rate:12">The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM)</option>
    <option value="flat_rate:14">Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM)</option>
    <option value="flat_rate:15">Title Boxing East Nashville - 605 Gallatin Ave, Nashville, TN 37206 (4PM - 7PM)</option>
  </select>
</p>
  
  <th>Shipping</th>
  <td>
    <select name="shipping_method[0]" data-index="0" id="shipping_method_0" class="shipping_method">
      <option value="">Select Shipping Method</option>
      <option value="flat_rate:1" >Delivery: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#036;</span>5.95</span></option>
      <option value="flat_rate:12"  selected='selected'>Pick Up - The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM) $0.00</option>
      <option value="flat_rate:14" >Pick Up - Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM) $0.00</option>
      <option value="flat_rate:15" >Pick Up - Title Boxing East Nashville - 605 Gallatin Ave, Nashville, TN 37206 (4PM - 7PM) $0.00</option>
      <option value="flat_rate:16" >Pick Up - 9 Round Fitness - 1050 Glenbrook Way #310, Hendersonville, TN 37075 (4PM-8PM) $0.00</option>
      <option value="flat_rate:18" >Pick Up - Bar Method - 4301 Harding Pike, Nashville, TN 37205 (5PM - 6:30PM) $0.00</option>
      <option value="flat_rate:19" >Pick Up - Title Boxing Cool Springs - 1550 W McEwen Dr, Franklin, TN 37067 (4PM - 8PM) $0.00</option>
      <option value="flat_rate:34" >Pick Up - Eat Well Kitchen - 500 Interstate Blvd S, Lobby, Nashville, TN 37210 (11:00AM - 5PM) $0.00</option>
      <option value="flat_rate:38" >Pick Up - 360 Fitness Coaching - 3744 Annex Ave, A3, Nashville, TN 37209 (4PM - 7PM) $0.00</option>
      <option value="flat_rate:40" >Grind Fitness - 1310 Antioch Pike #D Nashville, TN 37211 (4PM - 6PM) $0.00</option>
      <option value="flat_rate:32" >Pick Up (Sunday) - Crossfit Combustion - 133 Locke Ave, Spring Hill, TN 37174 (3PM) $0.00</option>
      <option value="flat_rate:33" >Pick Up (Sunday) - Title Boxing Cool Springs - 1550 W McEwen Dr, Franklin, TN 37067 (6:30PM - 7PM) $0.00</option>
      <option value="advanced_free_shipping" >Free Delivery($0.00)</option>
    </select>
  </td>
</tr>
＆＃13;
＆＃13;
＆＃13;

我有两个已经有数据的下拉菜单。我想根据第一个下拉选项中的一个选项填充第二个字段，其中一个选项已经可用。我所见过的所有教程都没有考虑数据是否已经存在。 

jQuery('select#pickup_location').on('change', function () {
  var selected = jQuery('#pickup_location option:selected').text();

  if (selected == 'The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM)') {
    jQuery('select#shipping_method_0').text('Pick Up - The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM) $0.00');
  } else if (selected=='Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM)') {
    jQuery('select#shipping_method_0').text('Pick Up - Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM) $0.00');
  }
});

这是我到目前为止所知道的事实，我知道这不是错，但我不知道在哪里或如何修复或简化它。这是下拉列表的HTML。

<p class="form-row form-row " id="pickup_location_field" data-rules="" data-rules-action="" data-validations="">
  <label for="pickup_location" class="">Pick Up Location</label>
  <select name="pickup_location" id="pickup_location" class="select thwcfe-input-field thwcfe-enhanced-select" data-allow_clear="true" data-placeholder="Please choose a pick up location">
    <option value="" selected='selected'></option>
    <option value="flat_rate:12">The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM)</option>
    <option value="flat_rate:14">Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM)</option>
    <option value="flat_rate:15">Title Boxing East Nashville - 605 Gallatin Ave, Nashville, TN 37206 (4PM - 7PM)</option>
  </select>
</p>

这是第二次下拉：

<tr class="shipping">
  <th>Shipping</th>
  <td>
    <select name="shipping_method[0]" data-index="0" id="shipping_method_0" class="shipping_method">
      <option value="">Select Shipping Method</option>
      <option value="flat_rate:1" >Delivery: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#036;</span>5.95</span></option>
      <option value="flat_rate:12"  selected='selected'>Pick Up - The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM) $0.00</option>
      <option value="flat_rate:14" >Pick Up - Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM) $0.00</option>
      <option value="flat_rate:15" >Pick Up - Title Boxing East Nashville - 605 Gallatin Ave, Nashville, TN 37206 (4PM - 7PM) $0.00</option>
      <option value="flat_rate:16" >Pick Up - 9 Round Fitness - 1050 Glenbrook Way #310, Hendersonville, TN 37075 (4PM-8PM) $0.00</option>
      <option value="flat_rate:18" >Pick Up - Bar Method - 4301 Harding Pike, Nashville, TN 37205 (5PM - 6:30PM) $0.00</option>
      <option value="flat_rate:19" >Pick Up - Title Boxing Cool Springs - 1550 W McEwen Dr, Franklin, TN 37067 (4PM - 8PM) $0.00</option>
      <option value="flat_rate:34" >Pick Up - Eat Well Kitchen - 500 Interstate Blvd S, Lobby, Nashville, TN 37210 (11:00AM - 5PM) $0.00</option>
      <option value="flat_rate:38" >Pick Up - 360 Fitness Coaching - 3744 Annex Ave, A3, Nashville, TN 37209 (4PM - 7PM) $0.00</option>
      <option value="flat_rate:40" >Grind Fitness - 1310 Antioch Pike #D Nashville, TN 37211 (4PM - 6PM) $0.00</option>
      <option value="flat_rate:32" >Pick Up (Sunday) - Crossfit Combustion - 133 Locke Ave, Spring Hill, TN 37174 (3PM) $0.00</option>
      <option value="flat_rate:33" >Pick Up (Sunday) - Title Boxing Cool Springs - 1550 W McEwen Dr, Franklin, TN 37067 (6:30PM - 7PM) $0.00</option>
      <option value="advanced_free_shipping" >Free Delivery($0.00)</option>
    </select>
  </td>
</tr>

3 个答案:

答案 0 :(得分：0)

.text()会设置textContent，但在这里您要使用html()函数并将文本包装在<option></option>标记内，然后只有它会在里面呈现select

＆＃13;
＆＃13; 
jQuery('select#pickup_location').on('change', function () {
  var selected = jQuery('#pickup_location option:selected').text();

  if (selected == 'The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM)') {
    jQuery('select#shipping_method_0').html('<option>Pick Up - The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM) $0.00</option>');
  } else if (selected=='Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM)') {
    jQuery('select#shipping_method_0').html('<option>Pick Up - Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM) $0.00</option>');
  }
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="shipping">
  <p class="form-row form-row " id="pickup_location_field" data-rules="" data-rules-action="" data-validations="">
  <label for="pickup_location" class="">Pick Up Location</label>
  <select name="pickup_location" id="pickup_location" class="select thwcfe-input-field thwcfe-enhanced-select" data-allow_clear="true" data-placeholder="Please choose a pick up location">
    <option value="" selected='selected'></option>
    <option value="flat_rate:12">The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM)</option>
    <option value="flat_rate:14">Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM)</option>
    <option value="flat_rate:15">Title Boxing East Nashville - 605 Gallatin Ave, Nashville, TN 37206 (4PM - 7PM)</option>
  </select>
</p>
  
  <th>Shipping</th>
  <td>
    <select name="shipping_method[0]" data-index="0" id="shipping_method_0" class="shipping_method">
      <option value="">Select Shipping Method</option>
      <option value="flat_rate:1" >Delivery: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#036;</span>5.95</span></option>
      <option value="flat_rate:12"  selected='selected'>Pick Up - The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM) $0.00</option>
      <option value="flat_rate:14" >Pick Up - Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM) $0.00</option>
      <option value="flat_rate:15" >Pick Up - Title Boxing East Nashville - 605 Gallatin Ave, Nashville, TN 37206 (4PM - 7PM) $0.00</option>
      <option value="flat_rate:16" >Pick Up - 9 Round Fitness - 1050 Glenbrook Way #310, Hendersonville, TN 37075 (4PM-8PM) $0.00</option>
      <option value="flat_rate:18" >Pick Up - Bar Method - 4301 Harding Pike, Nashville, TN 37205 (5PM - 6:30PM) $0.00</option>
      <option value="flat_rate:19" >Pick Up - Title Boxing Cool Springs - 1550 W McEwen Dr, Franklin, TN 37067 (4PM - 8PM) $0.00</option>
      <option value="flat_rate:34" >Pick Up - Eat Well Kitchen - 500 Interstate Blvd S, Lobby, Nashville, TN 37210 (11:00AM - 5PM) $0.00</option>
      <option value="flat_rate:38" >Pick Up - 360 Fitness Coaching - 3744 Annex Ave, A3, Nashville, TN 37209 (4PM - 7PM) $0.00</option>
      <option value="flat_rate:40" >Grind Fitness - 1310 Antioch Pike #D Nashville, TN 37211 (4PM - 6PM) $0.00</option>
      <option value="flat_rate:32" >Pick Up (Sunday) - Crossfit Combustion - 133 Locke Ave, Spring Hill, TN 37174 (3PM) $0.00</option>
      <option value="flat_rate:33" >Pick Up (Sunday) - Title Boxing Cool Springs - 1550 W McEwen Dr, Franklin, TN 37067 (6:30PM - 7PM) $0.00</option>
      <option value="advanced_free_shipping" >Free Delivery($0.00)</option>
    </select>
  </td>
</tr>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

创建一个javascript对象并将第二个下拉列表的值映射到第一个下拉列表并定义js函数，如下所示。这是最简单的方法，没有多个if else。

var obj = {
     "flat_rate:12" : "flat_rate:12",
   "flat_rate:14" : "flat_rate:14",
   "flat_rate:15" : "flat_rate:15"
}

jQuery('select#pickup_location').on('change', function () {
  var selected = jQuery('#pickup_location option:selected').val();
  jQuery('select#shipping_method_0').val(obj[selected]);
});

答案 2 :(得分：-1)

好的，所以你试图设置下拉列表的text()，但你应该做的是设置val()：

＆＃13;
＆＃13; 
//Simplified:  Check the val() (this will change less than the text, and it's harder to make a mistake with the val, as it's shorter!)
jQuery('select#pickup_location').on('change', function () {
  var selected = jQuery('#pickup_location option:selected').val();

  //both drop down lists have the same val's, so use that!
  if (selected == 'flat_rate:12' || selected== 'flat_rate:14') {
    jQuery('select#shipping_method_0').val(selected ).attr("disabled", "disabled");

  } else {
    //what if they select one, then select something different?
    //maybe set it back to the top selection?
    jQuery('select#shipping_method_0').val("").removeAttr("disabled");

  }
});
＆＃13; 
<!-- Don't forget to include jQuery in your snippets!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<tr class="shipping">
  <p class="form-row form-row " id="pickup_location_field" data-rules="" data-rules-action="" data-validations="">
  <label for="pickup_location" class="">Pick Up Location</label>
  <select name="pickup_location" id="pickup_location" class="select thwcfe-input-field thwcfe-enhanced-select" data-allow_clear="true" data-placeholder="Please choose a pick up location">
    <option value="" selected='selected'></option>
    <option value="flat_rate:12">The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM)</option>
    <option value="flat_rate:14">Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM)</option>
    <option value="flat_rate:15">Title Boxing East Nashville - 605 Gallatin Ave, Nashville, TN 37206 (4PM - 7PM)</option>
  </select>
</p>
  
  <th>Shipping</th>
  <td>
    <select name="shipping_method[0]" data-index="0" id="shipping_method_0" class="shipping_method">
      <option value="">Select Shipping Method</option>
      <option value="flat_rate:1" >Delivery: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#036;</span>5.95</span></option>
      <option value="flat_rate:12"  selected='selected'>Pick Up - The Ascent - 831 Park Ave, Murfreesboro, TN 37129 (5PM-10PM) $0.00</option>
      <option value="flat_rate:14" >Pick Up - Music City Fitness - 101 Creekside Crossing #600, Brentwood, TN 37027 (5PM-6PM) $0.00</option>
      <option value="flat_rate:15" >Pick Up - Title Boxing East Nashville - 605 Gallatin Ave, Nashville, TN 37206 (4PM - 7PM) $0.00</option>
      <option value="flat_rate:16" >Pick Up - 9 Round Fitness - 1050 Glenbrook Way #310, Hendersonville, TN 37075 (4PM-8PM) $0.00</option>
      <option value="flat_rate:18" >Pick Up - Bar Method - 4301 Harding Pike, Nashville, TN 37205 (5PM - 6:30PM) $0.00</option>
      <option value="flat_rate:19" >Pick Up - Title Boxing Cool Springs - 1550 W McEwen Dr, Franklin, TN 37067 (4PM - 8PM) $0.00</option>
      <option value="flat_rate:34" >Pick Up - Eat Well Kitchen - 500 Interstate Blvd S, Lobby, Nashville, TN 37210 (11:00AM - 5PM) $0.00</option>
      <option value="flat_rate:38" >Pick Up - 360 Fitness Coaching - 3744 Annex Ave, A3, Nashville, TN 37209 (4PM - 7PM) $0.00</option>
      <option value="flat_rate:40" >Grind Fitness - 1310 Antioch Pike #D Nashville, TN 37211 (4PM - 6PM) $0.00</option>
      <option value="flat_rate:32" >Pick Up (Sunday) - Crossfit Combustion - 133 Locke Ave, Spring Hill, TN 37174 (3PM) $0.00</option>
      <option value="flat_rate:33" >Pick Up (Sunday) - Title Boxing Cool Springs - 1550 W McEwen Dr, Franklin, TN 37067 (6:30PM - 7PM) $0.00</option>
      <option value="advanced_free_shipping" >Free Delivery($0.00)</option>
    </select>
  </td>
</tr>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题