PHP - WebCalendar - 基于下拉列表选择隐藏字段 [英] PHP - WebCalendar - hide field based on dropdown list selection
问题描述
使用WebCalendar应用程式 http://www.k5n.us/webcalendar.php 和我正在为额外字段的工作方式创建一些自定义修改。
Using the WebCalendar app http://www.k5n.us/webcalendar.php and I'm creating some custom edits for the way extra fields work.
特别是,我创建了两个额外的字段;其中一个是县的下拉列表,另一个是文本字段。下拉列表中的一个选项是 ** OTHER
,文本字段是供用户指定 ** OTHER
选择。
Particularly, I have two extra fields created; one of them being a dropdown list of counties, and the other being a text field. One option in the dropdown list is **OTHER
and the text field is there for the user to specify their **OTHER
selection.
我可以在PHP中指定下拉列表和选择:
I can specify the dropdown list and selection in PHP with the following:
if ($site_extras[1][3] == '**OTHER' )
{ do something to hide html class .other_field }
我可以根据下拉列表输入隐藏/显示文本字段的方向上的任何提示或推送?
Any hints or pushes in a direction that I may look into for hiding/showing the text field based on the dropdown list input?
请根据需要编辑和删除/添加标签。
Please edit and remove/add tags as necessary. I just selected ones that may be relevant for the needs of this operation.
编辑:Html片段
<table class="extra_table" summary="">
<tr>
<td class="aligntop bold">*Location:</td>
<td class="extra_field_input">
<select name="County">
<option value="Select County...
" selected="selected">Select County...
</option>
<option value="DODGE" >DODGE
</option>
<option value="DOUGLAS" >DOUGLAS
</option>
<option value="LANCASTER" >LANCASTER
</option>
<option value="MADISON" >MADISON
</option>
<option value="**OTHER" >**OTHER
</option>
<option value="--------------------" >--------------------
</option>
</select>
</td>
</tr>
<tr>
<td class="aligntop bold">**If Other, Please Specify:</td>
<td class="extra_field_input">
<input type="text" size="17" name="Other_County" value="" />
</td>
</tr>
推荐答案
看看这个jsfiddle: http://jsfiddle.net/2bt8D/
Take a look at this jsfiddle: http://jsfiddle.net/2bt8D/
我不得不为您的文本字段添加一个额外的类以区分它 extra
,并将您的输入/文本字段设置为 style =display:none; code>开始。如果这是可能的,在你使用的框架的限制内,你是一个赢家。 (
I had to add an extra class to your text field to differentiate it extra
, and set your input / text field to style="display:none;"
to start. If that is possible within the limitations of the framework you are using, you're on to a winner. (NOTE: There are definitely better ways to write the Jquery!)
Jquery语句:
$(function() {
$("select").change(function() {
var selectValue = $(".extra_field_input select").val();
if (selectValue == "**OTHER") {
$(".extra_field_input input").show();
$(".extra").show();
} else {
$(".extra_field_input input").hide();
$(".extra").hide();
};
});
});
需要HTML
<table class="extra_table" summary="">
<tr>
<td class="aligntop bold">*Location:</td>
<td class="extra_field_input">
<select name="County">
<option value="Select County..." selected="selected">Select County...</option>
<option value="DODGE" >DODGE</option>
<option value="DOUGLAS" >DOUGLAS</option>
<option value="LANCASTER" >LANCASTER</option>
<option value="MADISON" >MADISON</option>
<option value="**OTHER">**OTHER</option>
</select>
</td>
</tr>
<tr>
<td class="aligntop bold extra" style="display:none;">**If Other, Please Specify:</td>
<td class="extra_field_input">
<input style="display:none;" type="text" size="17" name="Other_County" value="" />
</td>
</tr>
</table>
这篇关于PHP - WebCalendar - 基于下拉列表选择隐藏字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!