我正在尝试使用来自jsfiddle（jsfiddle.net/xBxv4）的代码来根据下拉菜单选项切换表单，但它根本不起作用。我尝试将脚本移动到HEAD，就在FORM开始之前，就在BODY关闭之前，等等但它只是不执行切换。我验证了示例jsfiddle代码适用于jQuery 1.10.2代码库，因此它不是代码库问题。我的代码注入了一些CodeIgniter函数，但是id和类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>
答案 0 :(得分：1)
看起来有两个问题。首先，将代码放在dom ready处理程序中，以确保元素存在：
$(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();
});
});
其次，看起来您的下拉列表（例如）option的值为forsale。在你的javascript函数中，你这样做：
$('#forsale_form').hide();
但是然后使用该值来显示相同的表单，但值为forsale，所以
$('#' + val).show();
变为：
$('#forsale').show();
哪个不存在。因此，您可以更改下拉列表以获得正确的值，或将您的javascript更改为：
$('#' + val + '_form').show();