如何使用jquery或ajax在click上显示文本？

时间：2015-08-06 12:40:34

标签： javascript jquery html ajax

我是php新手。我有一个代码，其中我使用HTML``select标记。现在，当用户点击select代码ptions

时，我想在下面显示文字

我的选择标记代码是

<select name="ot">
  <option value="up">Update</option>
  <option value="in">Initial</option>
   </select>

我的网页结果是

enter image description here

请帮助我如何在点击时显示文字？

我试图通过W3school

这个例子解决问题

我的完整页面代码

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "pacra1";


$conn = new mysqli($servername, $username, $password, $dbname);
//$id2 = $_GET['id'];
$sql= "SELECT r.client_id,c.id,t.id,a.id,o.id,c.name as cname,t.title as ttitle,a.title as atitle,o.title as otitle, l.title as ltitle, s.title as stitle, co.fname, co.mname, co.lname, co.designation, co.city
FROM og_ratings r 
LEFT JOIN og_companies c
ON r.client_id = c.id
LEFT JOIN og_rating_types t
ON r.rating_type_id = t.id
LEFT JOIN og_actions a
ON r.pacra_action = a.id
LEFT JOIN og_outlooks o
ON r.pacra_outlook = o.id
LEFT JOIN og_lterms l
ON r.pacra_lterm = l.id
LEFT JOIN og_sterms s
ON r.pacra_sterm = s.id
LEFT JOIN   companies_contact co
ON c.id = co.companies_id
WHERE r.client_id= 20
ORDER BY r.id DESC
LIMIT 1";


$sql1= "SELECT r.client_id,c.id,t.id,a.id,o.id,c.name as cname,t.title as ttitle,a.title as atitle,o.title as otitle, l.title as ltitle, s.title as stitle
FROM og_ratings r 
LEFT JOIN og_companies c
ON r.client_id = c.id
LEFT JOIN og_rating_types t
ON r.rating_type_id = t.id
LEFT JOIN og_actions a
ON r.pacra_action = a.id
LEFT JOIN og_outlooks o
ON r.pacra_outlook = o.id
LEFT JOIN og_lterms l
ON r.pacra_lterm = l.id
LEFT JOIN og_sterms s
ON r.pacra_sterm = s.id
WHERE c.id= 20
ORDER BY r.id DESC
LIMIT 1,1";

$result = $conn->query($sql);

$result1 = $conn->query($sql1);
//$array = array('1','2','3');

while ($row = $result->fetch_assoc()){
    while ($row1 = $result1->fetch_assoc()){

?>


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Notification Letter.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />


    <style>
a:link {
    text-decoration: black;
}

a:visited {
    text-decoration: black;
}

a:hover {
    text-decoration: none;
}


</style>
</head>
<body link="#000000">

    <div style=" margin-left:auto; margin-right:auto; width: 60%">
    <div style="margin-top: 10px; width: 800px; font-family: 'Times New Roman', Times, serif;">
    <div style=" margin:auto; width:60px; height:auto; align: middle">
    <img src="image/pacra_logo.png" alt="logo">
    </div>
    <div style="margin:auto; width:auto; text-align:center; font-family:'Times New Roman', Times, serif; font-variant: small-caps; font-size:20px; font-weight:bold">
    The Pakistan Credit Rating Agency Limited 
    <hr>
    </div>
    </div>
    <form action="test1.php" method="POST">
    <div style="margin-top: 10px; width: auto">

 <div style="width: auto; float:" contenteditable="true"> <input type="text" name="nl" id="nl" value="NL FY 15" readonly /> </div>

 <div style=" margin-top:10px; width:280px; float:left; font-family:'Times New Roman', Times, serif; text-align:left; font-size:14px" contenteditable="true" align="center">
 <input type="text" name="to_name" value="<?php echo $row['fname']?> <?php echo $row['mname']?> <?php echo $row['lname']?>" readonly/> <br> <input type="text" name="to_designation" value="<?php echo $row['designation']?>" readonly/> <br> <input type="text" name="company" value="<?php echo $row['cname'] ?>" readonly/> <br> <input type="text" name="address" value="<?php echo $row['city'] ?>" readonly/></div>

 <div style=" margin-top:10px; margin-left:300px; width:auto; float:left; font-family:'Times New Roman', Times, serif; text-align:right; font-size:14px" contenteditable="true" align="center" ><input type="text" name="confidential" value="Confidential" readonly/><br><input type="date" /></div>

 <div style="margin-top: 110px; width:auto" align="center">
 <input type="text" name="company" value="<?php echo $row['cname'] ?>" width="500px" readonly/>
 </br>
 <table> <tr> <td> <input type="text" name="er" value="Entity Ratings - " readonly/> 
 <select name="ot">
  <option value="up">Update</option>
  <option value="in">Initial</option>
   </select></td></tr></table>
 </div>
 </div>
 <div style="margin-top: 10px; width: auto" >
 <div style="margin-top:10px; width:auto">
 <input type="text" name="dear_sir" value="Dear <?php echo $row['fname']?> <?php echo $row['lname']?>"/>
 </div>
 </div>


 <div>
<!------------------------- HERE I WANT TO DISPLAY MY TEXT---------------------------> 

 </div>


  <div style="margin-top: 70px; width: auto" align="center">
 <div style="width:auto; margin-top:10px"> 
 <table border="1">
        <tr>
            <td> ID </td>
            <td> <?php echo $row['client_id'] ?> </td>
        </tr>

        <tr> 
            <td>Name </td>
            <td><?php echo $row['cname'] ?> </td>
        </tr>

        <tr>
            <td>Rating Type </td>
            <td><?php echo $row['ttitle'] ?> </td>
        </tr>
        <tr>
            <td>Action </td>
            <td><?php echo $row['atitle'] ?> </td>
        </tr>
        <tr>
            <td>Outlook </td>
            <td><?php echo $row['otitle'] ?></td>
        </tr>
        <tr>
            <td rowspan="2">Long Term Rating </td>
            <td>Current (<?php echo $row['ltitle'] ?>) <tr><td>Previous (<?php echo $row1['ltitle'] ?>)</td> </tr></td>
        </tr>

        <tr>
            <td rowspan="2">Short Term Rating </td>
            <td>Current (<?php echo $row['stitle'] ?>) <tr><td>Previous (<?php echo $row1['stitle'] ?>)</td> </tr></td>
        </tr>


</table>
 </div>

 <div style="width:auto"> 

 </div>
 </div>
 <div style="margin-top:10px; width:auto">
 <input type="text" name="y_truly" value="Yours truly" readonly/>
 </div>
 <div style="margin-top:10px; width:450px">
 <select name="s_name">
  <option value="shahzad">Muhammad Shahzad Saleem</option>
  <option value="hanif">Jhangeer Hanif</option>
  <option value="rana">Rana Nadeem</option>
  </select>

   <br>
   <select name="s_designation">
  <option value="coo">Chief Operating Officer</option>
  <option value="uh">Unit Head</option>
   </select>
  </div>
 <div style="margin-top:10px; width:auto">
 <input type="checkbox" name="chk" value="p_release" checked> Encl: 1) Press Release<br>
  <!--<input type="checkbox" name="chk1" value="p_release" checked> Encl: 1) Press Release<br> -->
  <input type="checkbox" name="chk2" value="r_report"> 2) Rating Report<br>

 </div>


    <div style="margin-top:10px">
    <input type="submit" name="submit" value="Submit">
    <input type="submit" name="submit" value="Save">
    </div>

    </form>

<div style="clear: both;"></div>

    <div style="margin-top:30px; width:800px; float:left; text-align:center; font-family:'Times New Roman', Times, serif; font-size:18px;">
    <hr>
 <strong>Awami Complex FB-1, Usman Block, New Garden Town, Lahore-54600, Pakistan</strong>  
 </br>PABX: 92(42)35869504 Fax: 92(42)35830425 Email: pacra@pacra.com 
 </br><a href="http://www.pacra.com/">www.pacra.com</a>
    </div>
    </div>

    </div>

    </body>
</html>


<?php
    }
}
?>

3 个答案:

答案 0 :(得分：2)

假设你有一个元素#yourelement hidden（display：none），你可以在select框中使用'change'事件。（它比点击更好）。并在变化中显示元素。

$('select[name="ot"]').change(function() {
   $('#yourelement').show();
});

希望这有帮助。

答案 1 :(得分：1)

HTML 

<select name="ot">
  <option value="up">Update</option>
  <option value="in">Initial</option>
   </select> 

<div id="UpdatedResultHere" style="display:none;"> Updated text Here</div>
<div id="InitialResultHere" > Initial text Here</div>

SCRIPT：

$('select[name="ot"]').change(function() {
         $("#UpdatedResultHere").toggle();
        $("#InitialResultHere").toggle();      
 });

<强> Working Demo Here

答案 2 :(得分：1)

http://jsfiddle.net/3Lzo4q7m/11/

在html选择中添加ID，如下所示

<select name="ot" id="select">
  <option value="up">Update</option>
  <option value="in">Initial</option>
   </select></td></tr></table>
 </div>

div

相同 
<div id="display">
<!------------------------- HERE I WANT TO DISPLAY MY TEXT---------------------------> 

 </div>

js part你可以在这样的变化中显示它

$('#select').on('change',function(){
            $('#display').show()
        })

并点击这样

   $('#select').on('click',function(){
            $('#display').show()
        })
相关问题
最新问题