Javascript 使用jQuery Mobile的条件表单

我有一个多用途脚本：

<script>
$( document ).bind( "pageinit", function( event, data ) {
    $("#ppreg").hide();
    $("#smsreg").hide();
    $("#UserName").hide();
    $(".group1").hide();
    $(".group2").hide();
    $(".group0").hide();

$('#selectcode').change(function() {
      var regtype = $("#selectcode option:selected").val();
        if (regtype == "@") {
          $("#ppreg").show();
          $("#smsreg").hide();
          $("#UserName").show();
          $(".group1").show();
          $(".group2").hide();
          $(".group0").show();          
        } else {
          $("#ppreg").hide();
          $("#smsreg").show();
          $("#UserName").show();
      $(".group2").show();
          $(".group1").hide();
          $(".group0").show();  
       }
 });
});
    </script>

$（文档）.bind（“pageinit”，函数（事件，数据）{
$（“#ppreg”）.hide（）；
$（“#smsreg”）.hide（）；
$（“#用户名”）.hide（）；
$（“.group1”）.hide（）；
$（“.group2”）.hide（）；
$（“.group0”）.hide（）；
$（'#selectcode'）。更改（函数（）{
var regtype=$（“#选择代码选项：已选择”）.val（）；
如果（regtype==“@”）{
$（“#ppreg”）.show（）；
$（“#smsreg”）.hide（）；
$（“#用户名”）.show（）；
$（“.group1”）.show（）；
$（“.group2”）.hide（）；
$（“.group0”）.show（）；
}否则{
$（“#ppreg”）.hide（）；
$（“#smsreg”）.show（）；
$（“#用户名”）.show（）；
$（“.group2”）.show（）；
$（“.group1”）.hide（）；
$（“.group0”）.show（）；
}
});
});

范围1：根据所选值显示两个不同的标签 范围2：在选择countrycode后显示所有其他文件

在这种形式下，它运行良好：

 <label for="selectcode" class="select">LABEL"; 
 <select name="countrycode" id="selectcode" data-native-menu=\"true">
<option value="@">email (email field)</option>
    <option value="+39" >SMS:(+39)</option>
    </select>
<fieldset data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed="false">"
    <legend>"._LOGIN."</legend>"

<div class="group0>"

<label for="UserName" id="smsreg" >Username1</label>
     <label for="UserName" id="ppreg" >Username 2</label>
     ---- A
    <input title="TITLE" type="text" name="UserName" value="" class="required"  id="UserName" data-clear-btn="true"  />"
     ----- //A
   <div class="group0">
   <label class="group0" for="Password">Password:</label>
   <input class="group0" type="password" name="Password"   value="" id="Password" data-clear-btn="true"  placeholder="Password" /> 
.. MORE FIELDS ..
<button id="login" type="submit" value="validate!" data-theme="b">LOGIN</button> 
   </div>

标签”；
电子邮件（电子邮件字段）
短信：（+39）
"
“。\u登录。”
同一页中不能有相同的id。
对这两种类型使用具有不同id的同一类

比如说

<div class="group2">
    <input title="TITLE1" type="tel" name="UserName" value="" class="username required group2"  id="UserNameTel" data-clear-btn="true"  />"
    </div>
    <div class="group1">
    <input title="TITLE2" type="email" name="UserName" value="" class="username required group1"  id="UserNameMail" data-clear-btn="true"  />
   </div>


"

并在jquery脚本中选择不同的选择器。
看起来更改id和使用不同的选择器并不能解决问题。第一个用户名值始终为空（type=“tel”）。是否可以只更改输入元素中的“类型值”？对我来说这很正常，您应该在提交时处理。如果你愿意的话，试着创建一个提琴。我在考虑这样的东西，只有一个输入元素：$（“#UserName”）.setAttribute（'type'，'email'）$（“#UserName”）.setAttribute（'type'，'tel'）；这里是解决方案->每个表单控件都应该有一个唯一的name属性。这里是解决方案
<div class="group2">
    <input title="TITLE1" type="tel" name="UserName" value="" class="username required group2"  id="UserNameTel" data-clear-btn="true"  />"
    </div>
    <div class="group1">
    <input title="TITLE2" type="email" name="UserName" value="" class="username required group1"  id="UserNameMail" data-clear-btn="true"  />
   </div>