我正在尝试使用 jsfiddle ( jsfiddle.net/xBxv4 ) 中的代码根据下拉菜单选择切换表单，但它根本不起作用。我尝试将脚本移动到 HEAD，就在 FORM 开始之前，就在 BODY 关闭之前，等等，但它只是不执行切换。我验证了示例 jsfiddle 代码适用于 jQuery 1.10.2 代码库，因此这不是代码库问题。我下面的代码注入(inject)了一些 CodeIgniter 函数，但 id 和 class HTML 属性已适当定义。
为什么我的表单没有在选择时切换？有什么想法吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>add property</title>
<!-- Loading: jQuery -->
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript" language="Javascript"></script>
<script src="assets/js/jquery-migrate-1.2.1.min.js" type="text/javascript" language="Javascript"></script>
<!-- Loading, Setting Up: Form, Form Validation Plugin -->
<script src="assets/js/jquery.form.min.js" type="text/javascript" language="Javascript"></script>
<script src="assets/js/jquery.validate.min.js" type="text/javascript" language="Javascript"></script>
<script src="assets/js/jquery.validation.settings.js" type="text/javascript" language="Javascript"></script>
<!-- Loading: Respond.js (Old IE Media Queries) -->
<!-- Note: Respond.js only understands min-width / max-width media queries -->
<script src="assets/js/respond.min.js" type="text/javascript" language="Javascript"></script>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<h2>add a property</h2>
<?if($this->session->flashdata('flashError')):?>
<div class='flashError'>
<?=$this->session->flashdata('flashError')?>
</div>
<?endif?>
<script type="text/javascript" language="Javascript">
$('#property_campaign').on('change', function() {
var val = $(this).val();
$('#forsale_form').hide();
$('#forrent_form').hide();
$('#foreclosure_form').hide();
$('#portfolio_form').hide();
$('#undeveloped_form').hide();
$('#' + val).show();
});
</script>
<div id="addproperty_form_wrapper">
<?=form_open(base_url().'/admin/property/add', array('id'=>'picker_form','class'=>'picker_form'))?>
<p><span>*</span> = required field</p>
<ul>
<li>
<label>property name <span>*</span></label>
<?=form_input('property_name', set_value('property_name'), 'id="property_name"')?>
<?=form_error('property_name')?>
</li>
<li>
<label>campaign <span>*</span></label>
<?=form_dropdown('property_campaign', array('forsale' => 'for sale', 'forrent' => 'for rent', 'foreclosure' => 'foreclosure', 'portfolio' => 'portfolio', 'undeveloped' => 'undeveloped'), set_value('property_campaign'), 'id="property_campaign"')?>
<?=form_error('property_campaign')?>
</li>
</ul>
<?=form_close()?>
<!-- add for sale property form -->
<div id="forsale_formwrapper">
<?=form_open(base_url().'/admin/property/add', array('id'=>'forsale_form','class'=>'hidden'))?>
<h1>add a for sale property</h1>
<ul>
<li>
<label>property's asking price <span>*</span></label>
<?=form_input('property_askingprice', set_value('property_askingprice'), 'id="property_askingprice"')?>
<?=form_error('property_askingprice')?>
</li>
<li>
<label>property's blurb <span>*</span></label>
<?=form_textarea('property_blurb', set_value('property_blurb'),'id="property_blurb"')?>
<?=form_error('property_blurb')?>
</li>
<li>
<label>property manager <span>*</span></label>
<?=form_dropdown('manager_id', array('989' => 'Michael Smith', 'forrent' => 'for rent', 'foreclosure' => 'foreclosure', 'undeveloped' => 'undeveloped'), set_value('manager_id'))?>
<?=form_error('property_manager')?>
</li>
<li>
<label>property template <span>*</span></label>
<?=form_dropdown('template_id', array('9' => 'property X', 'forrent' => 'for rent', 'foreclosure' => 'foreclosure', 'undeveloped' => 'undeveloped'), set_value('template_id'))?>
<?=form_error('property_template')?>
</li>
<li>
<?=form_reset('reset_form','reset')?>
<?=form_submit('add_forsaleproperty','add forsaleproperty','id="add_forsaleproperty"')?>
</li>
</ul>
<?=form_close()?>
</div>
<!-- add parked property form -->
<div id="forrent_formwrapper">
<?=form_open(base_url().'/admin/property/add', array('id'=>'forrent_form','class'=>'hidden'))?>
<h1>add a parked property</h1>
<ul>
<li>
<label>parked property stuff <span>*</span></label>
<?=form_textarea('property_parkedstuff', set_value('property_parkedstuff'),'id="property_parkedstuff"')?>
<?=form_error('property_parkedstuff')?>
</li>
<li>
<?=form_reset('reset_form','reset')?>
<?=form_submit('add_parkedproperty','add parkedproperty','id="add_parkedproperty"')?>
</li>
</ul>
<?=form_close()?>
</div>
<!-- add mini-site property form -->
<div id="foreclosure_formwrapper">
<?=form_open(base_url().'/admin/property/add', array('id'=>'foreclosure_form','class'=>'hidden'))?>
<h1>add a foreclosure property</h1>
<ul>
<li>
<label>foreclosure property stuff <span>*</span></label>
<?=form_textarea('property_foreclosurestuff', set_value('property_foreclosurestuff'),'id="property_foreclosurestuff"')?>
<?=form_error('property_foreclosurestuff')?>
</li>
<li>
<?=form_reset('reset_form','reset')?>
<?=form_submit('add_foreclosureproperty','add foreclosureproperty','id="add_foreclosureproperty"')?>
</li>
</ul>
<?=form_close()?>
</div>
<!-- add portfolio property form -->
<div id="portfolio_formwrapper">
<?=form_open(base_url().'/admin/property/add', array('id'=>'portfolio_form','class'=>'hidden'))?>
<h1>add an portfolio property</h1>
<ul>
<li>
<label>portfolio property stuff <span>*</span></label>
<?=form_textarea('property_portfoliostuff', set_value('property_portfoliostuff'),'id="property_portfoliostuff"')?>
<?=form_error('property_portfoliostuff')?>
</li>
<li>
<?=form_reset('reset_form','reset')?>
<?=form_submit('add_portfolioproperty','add portfolioproperty','id="add_portfolioproperty"')?>
</li>
</ul>
<?=form_close()?>
</div>
<!-- add undeveloped property form -->
<div id="undeveloped_formwrapper">
<?=form_open(base_url().'/admin/property/add', array('id'=>'undeveloped_form','class'=>'hidden'))?>
<h1>add an undeveloped property</h1>
<ul>
<li>
<label>undeveloped property stuff <span>*</span></label>
<?=form_textarea('property_undevelopedstuff', set_value('property_undevelopedstuff'),'id="property_undevelopedstuff"')?>
<?=form_error('property_undevelopedstuff')?>
</li>
<li>
<?=form_reset('reset_form','reset')?>
<?=form_submit('add_undevelopedproperty','add undevelopedproperty','id="add_undevelopedproperty"')?>
</li>
</ul>
<?=form_close()?>
</div>
</div>
</body>
最佳答案
看起来像两个问题。首先，将您的代码放入一个 dom 就绪处理程序中，以便您可以确定该元素存在:
$(document).ready(function() {
$('#property_campaign').on('change', function() {
var val = $(this).val();
$('#forsale_form').hide();
$('#forrent_form').hide();
$('#foreclosure_form').hide();
$('#portfolio_form').hide();
$('#undeveloped_form').hide();
$('#' + val).show();
});
});
其次，看起来您有一个下拉列表(例如)一个选项，其值为forsale。在你的 javascript 函数中，你这样做:
$('#forsale_form').hide();
但是再用value来显示同样的形式，但是value是forsale，所以
$('#' + val).show();
变成:
$('#forsale').show();
这不存在。因此，您可以将下拉列表更改为具有正确的值，或者将您的 javascript 更改为:
$('#' + val + '_form').show();
关于javascript - 表格不切换选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21343061/