[英]Reset the element to initial html content when select value changes
当用户从国家/地区下拉列表中选择“美国”或“加拿大”时，我试图创建一个表单，一个状态下拉列表将显示。 否则，如果用户选择其他任何国家，则状态下拉列表将由文本输入代替。
这是一个示例（选择美国时）：
当选择其他国家时：
我已经得到了想要的结果，但是我只是想知道是否有更好的方法来简单地返回初始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内容。
提前致谢！
由于您已经有一个脚本可以为其他状态加载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>
我希望为美国，加拿大和其他国家/地区创建<li> ，然后根据下拉值显示隐藏它们，而不是每次在jquery中创建HTMl并将其附加在其他元素中时显示它们。 检查此链接更好的性能，空元素还是使用Javascript创建和销毁？
$(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(); } } });
<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>
尽管它最终以许多行或更多的代码结尾，但基本的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>
不一定更简单，但可能更整洁。 希望这可以帮助。
为什么一个的价值 <select>使用cloneNode（）时元素重置？
[英]Why does the value of a <select> element reset when using cloneNode()?
jQuery范围滑块，当值更改时更改span元素的内容
[英]Jquery range-slider which changes the content of a span element when the value changes
javascript / jquery-获取并保留元素的初始html内容
[英]javascript / jquery - get and hold element's initial html content
如何在值包含时通过html属性选择Protractor中的元素
[英]How to select element in Protractor by html attribute when value contains
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.