how to change input type on selection with jquery mobile

问题

lets says I have this script (jquery mobile 1.3.2)

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

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

and the following html form:

  <label for="selectcode" class="select">LABEL"; 
  <select name="countrycode" id="selectcode" data-native-menu=\"true">
    <option value="">Choose one</option>
   <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>

<input title="TITLE" type="text" name="UserName" value="" class="required"  id="UserName" data-clear-btn="true"  />"

Password: .. MORE FIELDS .. LOGIN

Problem: The input type doesn't change on selection, I would like change it from input type="text" to input type="tel" or input type="email" depending on value selected

Anyone could explain me where is the error?

Here the jsfiddle: http://jsfiddle.net/raidnet/U754k/4/

来源：https://stackoverflow.com/questions/18936612/how-to-change-input-type-on-selection-with-jquery-mobile

标签

javascript

jquery

jquery-mobile