output txt file with selectbox options in php
I am trying to display two selectboxes in my php page ,where the user can select options from first selectbox to add it to second box and then click a button to generate a textfile with all the options in the second selectbox.
Can anyone please help? (IE 7 only please)
Here is the code that I tried till now.
<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> </option>
</select></div>
<div style="position:absolute;top:50px;left:560px;">
<button id="btn1">Generate and Save .txt file</button>
</div>
</body>
</html>
Your problem seems quite vague, but here's some help for the HTML/JavaScript/Jquery part. It works for me (also uses the multiple select):
<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   here then ;) -->
</select>
</div>
<div style="position:absolute;top:50px;left:560px;">
<button id="btn1">Generate and Save .txt file</button>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论