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

【问题标题】：Reset the element to initial html content when select value changes选择值更改时将元素重置为初始 html 内容
【发布时间】：2018-04-13 13:06:28
【问题描述】：

我正在尝试创建一个表单，当用户从国家下拉列表中选择“美国”或“加拿大”时，将显示一个州下拉列表。否则，如果用户选择任何其他国家，状态下拉列表将被文本输入替换。

这是一个示例（选择美国时）：

以及选择其他国家/ / p>

我几乎得到了我想要的结果，但我只是想知道是否有更好的方法来简单地返回初始 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>

如果我的问题不够清楚：我已经得到了我想要的结果，但我只是想知道是否有更简单的方法可以简单地将“#region_wrapper”返回到其初始 html 内容已选择国家/地区。

提前致谢！

【问题讨论】：

更简单是指代码行数更少吗？如果是这样，那么如果您使用的是 Jquery，那么基本上就是这样（不过，使用框架，您将能够做到这一点）。最接近的替代方法是使用开关，它仍然会产生尽可能多的代码行。如果你愿意，我可以使用 switch 给出答案。
@Adibas03 是的，因为我总是喜欢更简单的代码。如果您能向我展示您的想法，那就太好了。非常感谢！

标签： javascript jquery html

【解决方案1】：

由于您已经有一个脚本来为其他州加载region-wrapper，因此不需要对 HTML 执行相同的操作。相反，该函数可以在加载页面以及更改时调用，以动态更新元素。这是您的代码的更简单版本，

<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>

【讨论】：

我也想过这个，但后来我想知道是否有什么我可以用 jQuery 做的，让它在
之间附加初始 html 仍然非常感谢寻找答案！

$(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(); } } });

$('#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; } }

<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>