2012-02-29 151 views
0

我正在使用jqtransform插件來創建選擇輸入,我在js文件中進行了一些更改,我正在創建一個選擇選項而不是li,並且我創建了一個differente腳本來獲得選擇選項innerhtml,但是當我在window.onload函數中調用此函數時正在爲第二次不工作而工作。jqtransform動態選擇選項?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="Content-Script-Type" content="text/javascript" /> 
    <meta http-equiv="Content-Style-Type" content="text/css" /> 
    <meta name="gmapkey" content="" /> 
    <meta name="description" content="" /> 
    <meta name="keywords" content="" /> 

    <title></title> 

    <link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" /> 
    <link rel="stylesheet" href="demo.css" type="text/css" media="all" /> 

    <script type="text/javascript" src="requiered/jquery.js" ></script> 
    <script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" ></script> 
    <script language="javascript"> 
     $(function(){ 
      $('form').jqTransform({imgPath:'jqtransformplugin/img/'}); 
     }); 
    </script> 

    <script type="text/javascript"> 

    function change() { 

var jAm= document.getElementById('sltnew'); 

var jM= jAm.options[jAm.selectedIndex].text; 

document.getElementById('catch').innerHTML=jM; 


} 


document.ajay.sltnew.onchange=change; 


    </script> 





</head> 
<body> 

    <form action="post.php" method="POST" name="ajay"> 
     <div class="rowElem"><label>Input Text:</label><input type="text" name="inputtext"/></div> 
     <div class="rowElem"><label>Input Password:</label><input type="password" /></div> 
     <div class="rowElem"><label>Checkbox: </label><input type="checkbox" name="chbox" id=""></div> 
     <div class="rowElem"><label>Radio :</label> 
      <input type="radio" id="" name="question" value="oui" checked ><label>oui</label> 
      <input type="radio" id="" name="question" value="non" ><label>non</label></div> 
     <div class="rowElem"><label>Textarea :</label> <textarea cols="40" rows="12" name="mytext"></textarea></div> 

     <div class="rowElem"> 
      <label>Select :</label> 
      <select name="select"> 
       <option value="">1</option> 
       <option value="opt1"></option> 
      </select> 
     </div> 
     <div class="rowElem" style="float:left; width:500px; position:relative"> 
      <label>Select Redimentionné :</label> 

      <select name="sltnew" id="sltnew" onchange="change()"> 
       <option value="opt1">Select states</option> 
       <option value="opt2">Option 2</option> 
       <option value="opt3">Option 3</option> 
       <option value="opt4">Option 4</option> 
       <option value="opt5">Option 5</option> 
       <option value="opt6">Option 6</option> 
       <option value="opt7">Option 7</option> 
       <option value="opt8">Option 8</option> 
      </select> 
      <div id="catch">select city</div> 
     </div> 

     <div class="rowElem"><label>Submit button:</label><input type="submit" value="Envoyer" /></div> 
     <div class="rowElem"><label>Reset button:</label><input type="reset" value="Annuler" /></div> 
     <div class="rowElem"><label>Input button:</label><input type="button" value="bouton" /></div> 

    </form> 

</body> 
</html> 

更改jqtransform文件我做了什麼。

$wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><select id="slt"></select>'); 
     var $ul = $('select', $wrapper).css('width',$select.width()).hide(); 
     /* Now we add the options */ 
     $('option', this).each(function(i){ 
      var oLi = $('<option><a href="#" index="'+ i +'">'+ $(this).html() +'</a></option>'); 
      $ul.append(oLi); 
     }); 

回答