隐藏和显示无效

时间:2013-07-22 03:18:21

标签: jquery html

我遇到了JQ脚本的问题,我找不到错误。当我从选择框中选择是选项时,网站应显示“键入您的电子邮件地址”并隐藏“键入您的新用户名”。 这是代码:

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">  </script>  

<script>
$(function () {
$('#am').on('change', function () {

    var stringt = $('#am :selected').val();

    if (stringt === "Yes") {
        $("#campos1").hide();
        $("#campos2").show();
    } else {
        $("#campos1").show();
        $("#campos2").hide();
    }
  });
});
</script> 
</head>
<html>
   <li>Are you already a member?
    <select name="am">
      <option value="1" selected="selected">Yes</option>
      <option value="2">No</option>
    </select>
   </li>
 <div id="campos1">
   <li>Type you email address.
    <input id="Field5" name="institucion_1" type="text" />
   </li>
 </div>
 <div id="campos2">
   <li>Type a new username.
    <input type="text" />
   </li>
 </div>
 </html>

这是jSfiddle:http://jsfiddle.net/sushanth009/CcCbQ/5/ 随意修改并建议我任何意见。 :)

2 个答案:

答案 0 :(得分:0)

你试图通过它的id选择元素,但它没有一个名称给它一个id然后你可以通过它的id选择它,select的值也是1和2不是和否

<select name="am" id="am">

...
if (stringt === "1") {

答案 1 :(得分:0)

你有多个错误

以下更正的代码

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">  </script>  

<script>
$(document).ready(function () {
$('#am').change( function () {

    var stringt = $('#am :selected').val();

    if (stringt === "1") {
        $("#campos1").hide();
        $("#campos2").show();
    } else {
        $("#campos1").show();
        $("#campos2").hide();
    }
  });
});
</script> 
</head>
<html>
   <li>Are you already a member?
    <select name="am" id="am">
      <option value="1" selected="selected">Yes</option>
      <option value="2">No</option>
    </select>
   </li>
 <div id="campos1">
   <li>Type you email address.
    <input id="Field5" name="institucion_1" type="text" />
   </li>
 </div>
 <div id="campos2">
   <li>Type a new username.
    <input type="text" />
   </li>
 </div>
 </html>