Question

您好

我有两个选项的选择

<select name="calc_shipping_country" id="calc_shipping_country" class="country_to_state" rel="calc_shipping_state">
    <option value="">Select a country…</option>
    <option value="IE">Republic of Ireland</option>
    <option value="GB" selected="selected">United Kingdom (UK)</option> 
</select>

如果第一个选择的值等于UK，我想显示以下代码（另一个选择）和不同的选项：

$('#calc_shipping_state_field').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option>  <option value='BE'>Bedfordshire</option> <option value='BER'>Berkshire</option> <option value='BRI'>Bristol</option> <option value='BUCK'>Buckinghamshire</option> <option value='CA'>Cambridgeshire</option> <option value='CHES'>Cheshire</option> <option value='LN'>City of London</option> </select></p>");
  $( "#county_selected" ).change(function() {
    $('#calc_shipping_state_field input.input-text').val($(this).find('option:selected').text());
  });

如果值等于IE，则显示此选择：

 $('#calc_shipping_state_field').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option>  <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> <option value='6'>6</option> <option value='7'>7</option> </select></p>");
  //     $('#calc_shipping_state_field input.input-text').val($(this).find('option:selected').text());
  //     });

由于第一个选择只有两个选项。我以为我可以使用以下IF：

  $('#calc_shipping_country').change(function(){
    if($(this).val() == 'UK'){
      $('#calc_shipping_state_field').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option>  <option value='BE'>Bedfordshire</option> <option value='BER'>Berkshire</option> <option value='BRI'>Bristol</option> <option value='BUCK'>Buckinghamshire</option> <option value='CA'>Cambridgeshire</option> <option value='CHES'>Cheshire</option> <option value='LN'>City of London</option> </select></p>");
      $( "#county_selected" ).change(function() {
        $('#calc_shipping_state_field input.input-text').val($(this).find('option:selected').text());
      });
    }
    else {
      $('#calc_shipping_state_field').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option>  <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> <option value='6'>6</option> <option value='7'>7</option> </select></p>");
      $('#calc_shipping_state_field input.input-text').val($(this).find('option:selected').text());
      });
    }
  });

但是没有工作......

参考：https://api.jquery.com/change/

有人可以帮助我并告诉我，我在做什么错误吗？

谢谢！

Answer 1

首先，在选项中，您有值'GB'，而在if语句中，您正在检查if($(this).val() == 'UK')。

此外，我建议使用以下方法清除添加的动态select代码：

$(this).next().remove();

最后一点是括号出现问题。正确的解决方案：

 $('#calc_shipping_country').change(function(){
    $(this).next().remove();
if($(this).val() == 'GB'){
  $('#calc_shipping_country').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option>  <option value='BE'>Bedfordshire</option> <option value='BER'>Berkshire</option> <option value='BRI'>Bristol</option> <option value='BUCK'>Buckinghamshire</option> <option value='CA'>Cambridgeshire</option> <option value='CHES'>Cheshire</option> <option value='LN'>City of London</option> </select></p>");
  $( "#county_selected" ).change(function() {
    $('#calc_shipping_state_field input.input-text').val($(this).find('option:selected').text());
  });
}
else if($(this).val() == 'IE'){
  $('#calc_shipping_country').after("<p class='form-row form-row-wide' id='calc_shipping_state_field' id=''> <select name='' id='county_selected' class='' rel=''> <option value=''>Select a county…</option>  <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> <option value='6'>6</option> <option value='7'>7</option> </select></p>");
  $('#calc_shipping_state_field input.input-text').val($(this).find('option:selected').text());
  }
});

请检查demo in jsfiddle

根据所选的选项显示不同的选择

1 个答案: