Question

我正在开发一个网站，目前我坚持注册过程。当我要求用户注册我的网站时，他们需要选择一个团队的人数。当我在选择框中选择人数时，我的网站会根据我选择的人数显示输入字段。这在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）中工作正常。

但是，其他Web浏览器不会根据我选择的人数显示输入字段。

这是以下代码：

<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>

拜托，我很高兴获得对此代码的支持，因为我已经多次查看过它，但我找不到该错误。我注意到这不是我的注册部分的最终设计。

干杯。

Answer 1

这是Live demo

您需要更改选项，然后单击选择的更改事件。您也可以删除选项的名称和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>

最后通过validator

运行您的代码

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

这是一个已清理的版本

Live demo

<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>

Answer 2

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

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

同时关闭<select>元素。

最后，检查#loscuatro div元素：li必须是ul或ol元素的子元素。

Answer 3

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>

我的jquery脚本只适用于mozilla。 Chrome，IE，Safari和Opera无法使用我的jquery

3 个答案: