Question

当用户选择＆＃34;美国＆＃34;时，我试图创建一个表单。或者＆＃34;加拿大＆＃34;从国家/地区下拉列表中，将显示状态下拉列表。否则，如果用户选择任何其他国家/地区，则状态下拉列表将被文本输入替换。

以下是一个例子（选择美国时）：

当选择其他国家/地区时：

我几乎得到了我想要的结果，但我只是想知道是否有更好的方法来简单地返回初始的html内容而不是用jQuery再次编写相同的东西？

这是我的jquery：

$('#country').change(function () {
    setRegion();
});
function setRegion() {
    var country = $('#country').val();
    var us_states = '<select id="us_states">...</select>';
    var ca_states = '<select id="ca_states">...</select>';
    if (country === 'United States') {
        $('#region_wrapper').html('<label for="us_states">State</label>' + us_states);
    } else if (country === 'Canada') {
        $('#region_wrapper').html('<label for="ca_states">State</label>' + ca_states);
    } else {
        $('#region_wrapper').html('<label for="region">Region, state, province, etc. (optional)</label>' + '<input type="text" id="region" placeholder="Region, state, province, etc. (optional)" />');
    }
}

和我的HTML：

<li id="country_wrapper">
    <label for="country">Country</label>
    <select id="country">...</select>
</li>
<li id="region_wrapper">
    <label for="region">Region, state, province, etc. (optional)</label>
    <input type="text" id="region" placeholder="Region, state, province, etc. (optional)" />
</li>

如果我的问题不够明确：我几乎得到了我想要的结果，但我只是想知道是否有更简单的方法来回归＆＃34;＃ region_wrapper＆＃34;当选择任何其他国家时，回到其初始的html内容。

提前致谢！

Answer 1

由于您已经有一个脚本可以为其他状态加载region-wrapper，因此不需要使用HTML。相反，只需在加载页面和更改时调用该函数，即可动态更新元素。这是一个更简单的代码版本，

＆＃13;

<html>
<li id="country_wrapper">
    <label for="country">Country</label>
    <select id="country">
	<option>Others</option>
	<option>United States</option>
	<option>Canada</option>
    </select>
</li>
<li id="region_wrapper">
</li>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
setRegion();
$('#country').change(function () {
    setRegion();
});
function setRegion() {
    var country = $('#country').val();
    var us_states = '<select id="us_states"><option>US1</option><option>US2</option></select>';
    var ca_states = '<select id="ca_states"><option>CA1</option><option>CA2</option></select>';
    if (country === 'United States') {
        $('#region_wrapper').html('<label for="us_states">State</label>' + us_states);
    } else if (country === 'Canada') {
        $('#region_wrapper').html('<label for="ca_states">State</label>' + ca_states);
    } else {
        $('#region_wrapper').html('<label for="region">Region, state, province, etc. (optional)</label>' + '<input type="text" id="region" placeholder="Region, state, province, etc. (optional)" />');
    }
}
</script>
</html>

＆＃13;

Answer 2

我更喜欢为美国，加拿大和其他人创建<li>，然后根据下拉值隐藏它们，而不是每次在jquery中创建HTMl并将它们附加到其他元素中。请检查此链接Better Performance, Empty Elements Or Create And Destroy With Javascript?

＆＃13;

$(document).ready(function() {
  $('#region_wrapper_others').hide();
  $('#region_wrapper_canada').hide();
  $('#country').change(function () {
    setRegion();
});
function setRegion() {
    var country = $('#country').val();
    if (country === 'United States') {
        $('#region_wrapper_us').show();
        $('#region_wrapper_canada').hide();
        $('#region_wrapper_others').hide();
    } else if (country === 'Canada') {
        $('#region_wrapper_us').hide();
        $('#region_wrapper_canada').show();
        $('#region_wrapper_others').hide();
    } else {
        $('#region_wrapper_us').hide();
        $('#region_wrapper_canada').hide();
        $('#region_wrapper_others').show();
    }
}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="country_wrapper">
    <label for="country">Country</label>
    <select id="country">
      <option>United States</option>
      <option>Canada</option>
      <option>Country1</option>
      <option>Country2</option>
      <option>Country3</option>
    </select>
</li>
<li id="region_wrapper_others">
    <label for="region">Region, state, province, etc. (optional)</label>
    <input type="text" id="region" placeholder="Region, state, province, etc. (optional)" />
</li>
<li id="region_wrapper_us">
    <label for="us_states">State</label>
    <select id="us_states">
        <option>US State 1</option>
        <option>US State 2</option>
    </select>
</li>
<li id="region_wrapper_canada">
    <label for="ca_states">State</label>
    <select id="ca_statesca_states">
        <option>Canada State 1</option>
        <option>Canada State 2</option>
    </select>
</li>

＆＃13;

Answer 3

虽然最终会有尽可能多的代码行，但基本的switch实现将是

$('#country').change(function () {
    setRegion();
});

function setRegion() {
    var country = $('#country').val();
    var us_states = '<select id="us_states">...</select>';
    var ca_states = '<select id="ca_states">...</select>';

    switch(country) {
        case 'United States':
            $('#region_wrapper').html('<label for="us_states">State</label>' + us_states);
            break;
        case 'Canada':
            $('#region_wrapper').html('<label for="ca_states">State</label>' + ca_states);
            break;
        default:
            $('#region_wrapper').html('<label for="region">Region, state, province, etc. (optional)</label>' + '<input type="text" id="region" placeholder="Region, state, province, etc. (optional)" />');
            break;
    }
}

HTML代码保持不变

<li id="country_wrapper">
    <label for="country">Country</label>
    <select id="country">...</select>
</li>
<li id="region_wrapper">
    <label for="region">Region, state, province, etc. (optional)</label>
    <input type="text" id="region" placeholder="Region, state, province, etc. (optional)" />
</li>

不一定更简单，但可能更整洁。希望这会有所帮助。

选择值更改时，将元素重置为初始html内容

3 个答案: