PHP - WebCalendar - 根据下拉列表选择隐藏字段

标签 php javascript jquery html css

使用 WebCalendar 应用 http://www.k5n.us/webcalendar.php我正在为额外字段的工作方式创建一些自定义编辑。

特别是,我创建了两个额外的字段;其中一个是县的下拉列表,另一个是文本字段。下拉列表中的一个选项是 **OTHER,文本字段供用户指定他们的 **OTHER 选择。

我可以使用以下 PHP 指定下拉列表和选择:

if ($site_extras[1][3] == '**OTHER' )
  { do something to hide html class .other_field }

我可能会根据下拉列表输入隐藏/显示文本字段的方向有任何提示或插入吗?

请根据需要编辑和删除/添加标签。我只是选择了可能与此操作的需求相关的那些。

编辑: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/

我必须向您的文本字段添加一个额外的类以extra区分它,并将您的输入/文本字段设置为style="display:none;"以开始。如果这在您使用的框架的限制范围内是可能的,那么您就是赢家。 (注意:肯定有更好的方法来编写 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 - 根据下拉列表选择隐藏字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7931002/

相关文章:

php - PDO 连接从命令行工作,但不是通过 Apache?

php - MySQL/PHP 批量删除使用数组 : Best method?

javascript - 从第一个下拉列表中选择后,如何将 li 值填充到另一个下拉列表中?

javascript - 覆盖动画填充模式 : forwards in JavaScript/CSS

jquery - Bootstrap 表单设计间距问题

带有箭头的 jquery magicline

php - 差异 : View Page Source vs. 在 Firebug 中查看

php - 在 PHP 中使用 exec 命令时可能出现的权限问题

javascript - Jquery - 动画滑动效果

javascript - 浏览器 : Prevent POST data resubmit on refresh using only JavaScript