Question

我目前有一个学校项目，还有一个需要完成的最后一件事。

我目前有一个表单，用户可以在其中写入有关游戏“武器理念”的详细信息。然而，用户需要做出选择，用户有3种不同的选择，并且根据他们选择的内容，某些输入字段需要变得不可见。我正在使用php和jQuery / javascript来使其工作。

示例php文本：

<form action="create-a-weapon.php" method="post">
<input type='hidden' name='reloadtype' />
<table>
        <tr>
            <td>
            Base damage:
            </td>
            <td>
            <input type='text' name='Base_Damage' id="Base_Damage" value='<?php echo $Base_Damage; ?>'>
            </td>
        </tr>
        <tr>
            <td>
            Max Damage(Maximum rampup):
            </td>
            <td>
            <input type='text' name='Damage' id="Damage" value='<?php echo $Damage; ?>'>
            </td>
        </tr>
        <tr>
            <td>
            Pellets:
            </td>
            <td>
            <input type='text' name='Pellets' id="Pell" value='<?php echo $Pell; ?>'>
            </td>
        </tr>

正如您可能已经注意到我将其中一个输入字段用作“隐藏”，因为我的朋友告诉我隐藏字段需要存储在那里。他不幸离开了，所以我无法得到他的任何帮助。我试图在网上搜索它，但我找不到任何看起来像它。我对javascript / jQuery并不擅长，我希望任何人都可以帮助我。我添加了源代码，因为我使用了一些字段来计算输入（所以我可以写出DPS等）。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="script/calculate.js" type="text/javascript"></script>

reloadtype

<div id="dialog-confirm" title="Choose your reload type">
<!--<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px  0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>-->
<select>
  <option value="shells">Shells and projectiles</option>
  <option value="clip">Clip</option>
  <option value="No reload">No reload</option>
</select>
</div>

这是javascript中的对话框窗口

$( "#dialog-confirm" ).dialog({
resizable: false,
height:240,
width: 340,
modal: true,
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).hide(); },
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
},
}
});

先谢谢你 -AM

Answer 1

我有这个代码适用于按钮点击：

<script>
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {        
jQuery('#content2').toggle('hide');
});
});
</script>

然后在现场：

<?php
<p><input type="button" value="Load Template" id="hideshow" />
<div id="content2" style="block">

或者您可以使用@php检查所选值。

Answer 2

试试这个：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        <script src="script/calculate.js" type="text/javascript"></script>
        <script>
            $(document).ready(function() {
                $('.reloadtype').change(
                    function() {
                        if ($(this).val()=="clip") {
                            $('.pellets').hide(500);
                        } else {
                            $('.pellets').show(500);
                        }
                    }
                );
            });
        </script>
    </head>
    <body>
        <form action="create-a-weapon.php" method="post">
        <input type='hidden' name='reloadtype' />
        <table>
                <tr>
                    <td>
                    Base damage:
                    </td>
                    <td>
                    <input type='text' name='Base_Damage' id="Base_Damage" value='<?php echo $Base_Damage; ?>'>
                    </td>
                </tr>
                <tr>
                    <td>
                    Max Damage(Maximum rampup):
                    </td>
                    <td>
                    <input type='text' name='Damage' id="Damage" value='<?php echo $Damage; ?>'>
                    </td>
                </tr>
                <tr class="pellets">
                    <td>
                    Pellets:
                    </td>
                    <td>
                    <input type='text' name='Pellets' id="Pell" value='<?php echo $Pell; ?>'>
                    </td>
                </tr>
        </table>
        <div id="dialog-confirm" title="Choose your reload type">
        <!--<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px  0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>-->
        <select class="reloadtype">
          <option value="shells">Shells and projectiles</option>
          <option value="clip">Clip</option>
          <option value="No reload">No reload</option>
        </select>
        </div>
    </body>
</html>

需要根据用户选择隐藏输入字段

2 个答案: