2010-05-17 3 views
0

두 번째 선택 상자를 내 PHP 페이지에 표시하려고합니다. 첫 번째 선택 상자에서 옵션을 선택하여 두 번째 상자에 옵션을 추가 한 다음 단추를 클릭하여 모든 텍스트 파일을 생성 할 수 있습니다 두 번째 선택 상자의 옵션.출력 상자 txt 파일을 PHP에서 selectbox 옵션을 사용하여

아무도 도와 줄 수 있습니까? (IE 7 만 제발)

여기에 지금까지 시도한 코드가 있습니다.

<html> 
<head> 
<script language="JavaScript"> 
function moveSelectedOption() { 
    // Fetch references to the <select> elements. 
    var origin = document.getElementById('origin_select'); 
    var target = document.getElementById('target_select'); 

    // Fetch the selected option and clone it. 
    var option = origin.options[origin.selectedIndex]; 
    //var copy = option.cloneNode(true); 

    // Add the clone to the target element. 
    //target.add(copy, null); 

target.options[target.options.length] = new Option(option.text, option.value); 
} 
</script> 
</head> 
<body> 
<div style="position:absolute;top:10px;left:10px;"> 
<?php 
     // Make a MySQL Connection 
     mysql_connect("localhost", "jpro", "pop") or die(mysql_error()); 
     mysql_select_db("db1") or die(mysql_error()); 
     $result = mysql_query("select t1 from results") or die(mysql_error()); 
     ?> 
     <select id="origin_select" style="height:400px;width:200px;" multiple> 
     <?php 
     while($row = mysql_fetch_array($result)) { 
     $t1 = $row['T1']; 
     ?> 
     <option value="<?php echo $t1; ?>"><?php echo $t1; ?></option> 
     <?php 
     } 
     ?> 
    </select> 
</div> 
<script> 
$("#btn1").click (functio() { 
var arr= new Array; 
$("#target_select option").each (function() { 
//arr.push($(this).val()); 
alert (this.val()); 
}); 
}); 
</script> 
<div style="position:absolute;top:50px;left:220px;"> 
<button onclick="moveSelectedOption()">Add</button> 
</div> 
<div style="position:absolute;top:10px;left:300px;"> 
<select id="target_select" style="height:400px;width:200px;" multiple> 
<option>&nbsp;</option> 
</select></div> 
<div style="position:absolute;top:50px;left:560px;"> 
<button id="btn1">Generate and Save .txt file</button> 
</div> 



</body> 
</html> 

답변

0

문제는 매우 애매하지만 여기서는 HTML/JavaScript/Jquery 부분에 대한 도움이됩니다. 그것은 나를 위해 작동합니다 (또한 여러 선택 사용) :

<html lang="en"> 
    <head> 
     <!-- include jquery here !--> 

     <script language="JavaScript"> 
     function moveSelectedOption() { 
      // Walk through ALL selected options in origin list 
      $("#origin_select option:selected").each(function() { 
       // Clone option and add to target list 
       $("#target_select").append($(this).clone()); 
      }); 
     } 

     // Gets called on document load 
     $(function() { 
      $("#btn1").click (function() { 
       var arr= new Array; 
       var str = ""; 
       var str2 = ""; 
       $("#target_select option").each (function() { 
        // You can push the array on an array 
        arr.push($(this).val()); 
        // or append it to a string 
        str = str + $(this).val() + "\n"; 
        // or append it to a string with <BR>s as line-breaks 
        str2 = str2 + $(this).val() + "<BR>"; 
       }); 
       // Alert the string to the user 
       alert(str); 

       // now do something with either one of them...for example open 
       // a new window and generate list in there as html to copy-and-paste 
       wn = window.open(); 
       wn.document.write("<HTML>"+str2+"</HTML>"); 
       wn.document.close(); 

      }); 
     }); 
     </script> 
    </head> 

    <body> 
     <div style="position:absolute;top:10px;left:10px;"> 
       <select id="origin_select" style="height:400px;width:200px;" multiple> 
       <!-- I don't use php so I just added some hard-coded options --> 
       <option value="Just an option ID">Just an Option Value</option> 
       <option value="In your case ID and Value are the same">In your case ID and Value are the same</option> 
       <option value="Another One">Another One</option> 
      </select> 
     </div> 
     <script> 
     </script> 

     <div style="position:absolute;top:50px;left:220px;"> 
      <button onclick="moveSelectedOption()">Add</button> 
     </div> 

     <div style="position:absolute;top:10px;left:300px;"> 
      <select id="target_select" style="height:400px;width:200px;" multiple> 
       <!-- do you want to start with an empty line? Add your option &nbsp here then ;) --> 
      </select> 
     </div> 

     <div style="position:absolute;top:50px;left:560px;"> 
      <button id="btn1">Generate and Save .txt file</button> 
     </div> 
    </body> 
</html> 
+0

응답 주셔서 감사합니다,하지만 IE에서 작동하지 않습니다. 나는 클론이 IE에서 지원되지 않는다고 생각한다. – JPro

+0

클론은 jQuery 함수이다. 최신 jQuery 버전을 사용하고 있습니까? 여기 IE 8에서는 잘 작동합니다! – Jochem

+0

네,'http : // ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'의 최신 jquery를 사용하고 있습니다. IE7에서 작업 할 예정입니다. – JPro

관련 문제