|
 |
| |
CreateElement ได้แต่ class="chosen-select" ไม่ทำงาน |
| |
 |
|
|
 |
 |
|
คือผมต้องการทำฟอร์มรับข้อมูลโดยผู้ใช้งานสามารถใส่ข้อมูลได้หลายเรคอร์ด มีการใช้ java script เพื่อทำการ CreateElement input รับข้อมูล
มีการใช้ select รับข้อมูล ซึ่งมีหลายตัวเลือกมาก เลยเลือกใช้ modern select ของ chosen เพื่อที่จะให้ user พิมพ์ค้นหาตัวเลือกได้
แต่พอ CreateElement ที่เป็น select ก็จะออกมาเป็นแบบ select ธรรมดา ไม่ได้เรียกใช้ chosen ซึ่งไม่รู้ว่าต้องแก้ยังไง
การใช้ shosen เท่าที่ที่ผมเข้าใจคือ การใส่ class="chosen-select" ให้กับตัว select
(https://harvesthq.github.io/chosen/)
Code
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>
<?php
mysql_connect("localhost","root","root");
mysql_select_db("dbcal");
$strSQL = "SELECT * FROM nutrition";
$objQuery = mysql_query($strSQL);
?>
<script language="javascript">
function fncCreateSelectOption(ele)
{
var objSelect = ele;
var Item = new Option("", "");
objSelect.options[objSelect.length] = Item;
<?php
while($objResult = mysql_fetch_array($objQuery))
{
?>
var Item = new Option("<?php echo $objResult["nnueng"];?>", "<?php echo $objResult["nuid"];?>");
objSelect.options[objSelect.length] = Item;
<?php
}
?>
}
function fncCreateElement(){
var mySpan = document.getElementById('mySpan');
var myLine = document.getElementById('hdnLine');
myLine.value++;
// Create input text
var myElement1 = document.createElement('input');
myElement1.setAttribute('type',"text");
myElement1.setAttribute('name',"txtGalleryName"+myLine.value);
myElement1.setAttribute('id',"txt"+myLine.value);
mySpan.appendChild(myElement1);
// Create input file
var myElement2 = document.createElement('input');
myElement2.setAttribute('type',"file");
myElement2.setAttribute('name',"fileUpload"+myLine.value);
myElement2.setAttribute('id',"fil"+myLine.value);
mySpan.appendChild(myElement2);
// Create select
var myElement3 = document.createElement('select');
myElement3.setAttribute('class',"chosen-select");
myElement3.setAttribute('style',"width:300px");
myElement3.setAttribute('name',"selSelect"+myLine.value);
myElement3.setAttribute('id',"sel"+myLine.value);
mySpan.appendChild(myElement3);
// Create Option //
fncCreateSelectOption(myElement3)
// Create <br>
var myElement4 = document.createElement('br');
myElement4.setAttribute('name',"br"+myLine.value);
myElement4.setAttribute('id',"br"+myLine.value);
mySpan.appendChild(myElement4);
}
function fncDeleteElement(){
var mySpan = document.getElementById('mySpan');
var myLine = document.getElementById('hdnLine');
if(myLine.value >= 1)
{
// Remove input text
var deleteFile = document.getElementById("txt"+myLine.value);
mySpan.removeChild(deleteFile);
// Remove input file
var deleteFile = document.getElementById("fil"+myLine.value);
mySpan.removeChild(deleteFile);
// Remove select
var deleteFile = document.getElementById("sel"+myLine.value);
mySpan.removeChild(deleteFile);
// Remove <br>
var deleteBr = document.getElementById("br"+myLine.value);
mySpan.removeChild(deleteBr);
myLine.value--;
}
}
</script>
<body Onload="JavaScript:fncCreateElement()">
<form action="webpage.php" method="post" name="frmMain" enctype="multipart/form-data">
<input name="btnCreate" type="button" value="+" onClick="JavaScript:fncCreateElement();">
<input name="btnDelete" type="button" value="-" onClick="JavaScript:fncDeleteElement();"><br>
<div id="mySpan"></div>
<input name="hdnLine" id="hdnLine" type="hidden" value="0">
<input name="btnSubmit" type="submit" value="Submit">
</form>
<select class="chosen-select" style="width: 200px">
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</body>
</html>
Tag : MySQL, HTML/CSS, JavaScript, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2015-02-12 15:33:32 |
By :
phannack |
View :
995 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ปกติก็เรียกใช้แค่นี้นะครับ
Code (PHP)
$(".chosen-select").chosen({no_results_text: "ไม่พบผู้ใช้งานนี้ในระบบ"});
|
| |
|
|
| |
| Date :
2015-02-12 17:53:39 |
By :
Manussawin |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
