在 Jquery .html 替换新 div 上的整个 div 选择器后不起作用
Posted
技术标签:
【中文标题】在 Jquery .html 替换新 div 上的整个 div 选择器后不起作用【英文标题】：After Jquery .html to replace entire div selector on the new div not working 【发布时间】：2012-10-03 21:14:18 【问题描述】：搜索和搜索..找不到参考..但这一定很明显。
2 选择列表
如果结果如果第一个是澳大利亚，则保留第二个列表
如果不是澳大利亚，则用输入框替换第二个列表。
如果您选择澳大利亚以外的其他国家，则效果很好。但是，如果您再次选择澳大利亚，则不会发生任何事情。
一些调试警报以查看是否正常工作，并在最后警报中显示我正在寻找或替换的 div 的值。
我们将不胜感激。
提前致谢
PS 对格式感到抱歉 - 将 html 代码放入帖子中时遇到了麻烦
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h4>Shipping:</h4>
<form id="_shipping" class = "shipping-form" method="post" action="payments">
<Select name ='country' id='country'>
<option value='Australia'>Australia </option>
<option value='USA'>USA </option>
<option value='Canada'>Canada </option>
</Select>
<div id='states' class='states'>
<select name='state' id='state' class = 'state'>
<option value='NSW'>NSW </option>
<option value='ACT'>ACT </option>
<option value='WA'>WA </option>
</select>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.min.js'> </script>
<script type="text/javascript">
$(document).ready(function()
var bob = $('div#states').html();
$('#country').change(function()
var brm = $('#country').val();
alert(bob);
if(brm === "Australia")
alert('if '+brm);
alert('wtf: \r\n' +$('#states').html);
$('div#states').empty().html(bob); //html(bob);
else
alert('else '+brm);
$('div#states').html("Enter State: <input name = 'state' id = 'state'>");
);
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：您的问题是，一旦将 html 设置为文本输入，您从一开始就有的选择列表就消失了。您可以保存它以供以后使用，从 Javascript 创建选择，或者永远不要实际删除它。
这是一个“通过 Javascript 创建”的解决方案：
$("#country").change(function()
var brm = $(this).val();
var output = '';
if(brm === "Australia")
// Create "states" array
var states = ["NSW", "ACT", "WA"];
// Start select tag
output = '<select name="state" id="state">';
// Loop through all states and add the options
for (var i = 0 ; i < states.length ; i++)
output += '<option value="' + states[i] + '">' + states[i] + '</option>';
// Close select tag
output += '</select>';
else
// Create text input
output = 'Enter State: <input name="state" id="state">';
// Set the output
$('div#states').html(output);
).trigger("change"); // Trigger the event, so that it runs on page load
JsFiddle：http://jsfiddle.net/aebWm/
或者如果你想保存选择然后重置它：
var originalStates = $('div#states').html();
$("#country").change(function()
if($(this).val() === "Australia")
$('div#states').html(originalStates)
else
$('div#states').html('Enter State: <input name="state" id="state">');
);
【讨论】：
我将初始选择列表保存在变量 bob 中。 更新了保存选择并重置它的答案。您当前代码中的错误是else 后缺少 括号
哦，感谢...非常感谢。 Dreamweaver 发现语法错误就这么多。好的，到目前为止 2 天使用 Java。 :-)
这不是语法错误，它只是不符合您的预期。我认为你的意思是Javascript。 :)以上是关于在 Jquery .html 替换新 div 上的整个 div 选择器后不起作用的主要内容，如果未能解决你的问题，请参考以下文章
如何将用户重定向到 div 上的新页面单击 JQuery [重复]
jQuery替换已存在于元素element上的事件event
动态替换/生成 div 中的 HTML 内容 | .NET + jQuery