0

我正在开发一个网站，目前我坚持注册过程。当我要求用户注册我的网站时，他们需要选择团队的人数。当我在选择框中选择人数时，我的网站会根据我选择的人数显示输入字段。这在 Mozilla Firefox (Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.2.24) Gecko/20111109 CentOS/3.6.24-3.el6.centos Firefox/3.6.24) 中运行良好。

尽管如此，其他网络浏览器不会根据我选择的人数显示输入字段。

这是以下代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){   
  $("#muestra1").click(function(){
    $("#loscuatro").hide();
  });
}); 
$(document).ready(function(){
 $("#muestra2").click(function(){
    $("#loscuatro").show(); 
  });
});     
</script>
</head>
<body>
<div id="container" class="ltr">    
    <li><span>
     <div id="container" class="ltr">    
       <h2>Please give us your name</h2>
      <ul>
        <li>
                 <span>
           Number of team members <select name="integrantes" id="integrantes" >                  
                <option  name="member1"  value="1"   id="muestra1" >1</option>
            <option  name="member2"  value="2"   id="muestra2">2</option>
        </li><hr /></span>  
 <b><h3>Leader</h3></b>
        <li>
         <span>
        Name* <input id="Field0" /></span>
   </li><hr />   
<div id="loscuatro">  
<b><h3>Volunteer</h3></b>         
    <li>
       <span>
         Name* <input id="Field0" /></span>
    </li><hr />       
 </div><!--end of volunteer loscuatros-->   
 </div>  
</body>
</html>

拜托，我会很高兴收到对这段代码的支持，因为我已经看过好几次了，但我找不到错误。我注意到这不是我注册部分的最终设计。

干杯。

4

3 回答 3

3

这是一个现场演示

您需要将您的选项单击更改为选择的更改事件。您还可以删除选项的名称和 ID：

$(function(){
  $("#integrantes").on("change",function(){
    $("#loscuatro").toggle(this.selectedIndex==1); // second option is option 1
  });
  $("#integrantes").change(); // set to whatever it is at load time 
});

并关闭选择

<select name="integrantes" id="integrantes" > 
  <option value="1">1</option>
  <option value="2">2</option>
</select>

最后通过验证器运行您的代码

你已经解开了 LI 和两个具有相同 ID 的 div，据我所知，没有看到 CSS，无用的跨度。

这是一个清理过的版本

现场演示

<div id="container" class="ltr">    
  <h2>Please give us your name</h2>
  <ul>
    <li>
      Number of team members 
      <select name="integrantes" id="integrantes" > 
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </li>
  </ul>
  <h3>Leader</h3>
  <ul>  
    <li>
      Name* <input id="Field0" /><hr />   
    </li>
  </ul>
  <div  id="loscuatro">    
    <h3>Volunteer</h3>
    <ul>
      <li>
       Name* <input id="Field0" /><hr />       
      </li>
    </ul>
  </div><!--end of volunteer loscuatros-->   
</div>
于 2013-06-24T05:04:43.030 回答
0

我不认为option是可以单击的元素（至少以跨浏览器兼容的方式）。最好依赖元素的change事件：select

$(document).ready(function(){
    $("#integrantes").change(function(){
        var val = $(this).val();
        if(val=='1') {
            $('#loscuatro').hide();
        } else {
            $('#loscuatro').show();
        }    
    });
});

同时关闭你的<select>元素。

最后，检查#loscuatrodiv element: limust be a child of a ulorol元素。

于 2013-06-24T05:05:52.600 回答
0

HTML有几个问题：

<body>
     <div id="container" class="ltr">    
       <h2>Please give us your name</h2>
       <ul>
            <li>
                <span>Number of team members 
                    <select name="integrantes" id="integrantes" >                  
                        <option  name="member1"  value="1"   id="muestra1" >1</option>
                        <option  name="member2"  value="2"   id="muestra2">2</option>
                    </select>
                </span>
            </li>  
            <b><h3>Leader</h3></b>
            <li>
                <span>
                Name* <input id="Field0" /></span>
            </li>
        </ul>
    </div>
    <div id="loscuatro">  
        <b><h3>Volunteer</h3></b>
        <ul>         
            <li>
                <span>
                   Name* <input id="Field0" />
                </span>
            </li><hr />  
         </ul>     
     </div><!--end of volunteer loscuatros-->   
</body>
  • 你不能有两个相同的元素id。
  • 大多数 HTML 标签都需要有一个结束标签，也就是：<li>....</li>
  • 你不能有<li>一个<ul>或<ol>

这是正确的形式：

<ul>
    <li>...</li>
    <li>...</li>
</ul>
于 2013-06-24T05:14:46.820 回答