ติดปัญหา script jquery ค่ะ เราจะเลือก select option ให้แสดงข้อมูลออกมาโชว์ แต่สคริปมันไปชนกันทำอย่างไงดีค่ะ
ไปกำหนด id ซ้ากันนิครับ
Code (PHP)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>change demo</title>
<style>
div {
color: red;
}
</style>
<script type="text/javascript" src="include/jquery/jquery-1.9.0.min.js"></script>
</head>
<body>
<table width="200" border="1">
<tr>
<td>
<select name="sweets" id="sweets">
<option>Chocolate</option>
<option>Candy</option>
<option>Taffy</option>
</select>
<script>
$( "#sweets" )
.change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "#sweets_div" ).text( str );
})
.change();
$( "#depart" )
.change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "#depart_div" ).text( str );
})
.change();
</script>
</td>
<td>
<select name="depart" id="depart" class="inputx">
<option value="">- -</option>
<option value='HR' >HR</option>
<option value='MYCOM' >MYCOM</option>
</select>
</td>
</tr>
<tr>
<td><div id="sweets_div"></div></td>
<td><div id="depart_div"></div></td>
</tr>
</table>
</body>
</html>
Date :
2016-01-12 14:26:22
By :
progamer2000
ขอบคุณค่ะ แต่เมื่อนำโค๊ดจากคุณ Boat Junior ไปทดสอบก็ไม่ได้ เราลองเลือก select กลับไปกลับมา ผลจะเป็นตามรูปภาพเลย
Date :
2016-01-12 16:06:58
By :
loomoo
Code (PHP)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>change demo</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<table width="200" border="1">
<tr>
<td>
<select name="sweets" id="sweets">
<option>Chocolate</option>
<option>Candy</option>
<option>Taffy</option>
</select>
</td>
<td>
<select name="depart" id="depart" class="inputx">
<option value="">- -</option>
<option value='HR' >HR</option>
<option value='MYCOM' >MYCOM</option>
</select>
</td>
</tr>
<tr>
<td><div id="sweets_div"></div></td>
<td><div id="depart_div"></div></td>
</tr>
</table>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$("select").on('change',function(){
var str = $(this).attr('id');
var val = $('#'+str+' option:selected').text();
$('#'+str+'_div').text(val);
});
</script>
</body>
</html>
Date :
2016-01-12 16:16:50
By :
progamer2000
ขอบคุณค่ะ
Date :
2016-01-12 17:06:53
By :
loomoo
ขอถามอีกนิดนึงค่ะ ถ้าเราจากเปลี่ยนประเภท Filter :text , :password , :radio , :checkbox , :submit , :button , :image , :file จะต้องแก้ไขตรงไหนบ้างค่ะ ขอตัวอย่าง text หรือ radio ก็ได้ค่ะ
Code (PHP)
<script>
$("select").on('change',function(){
var str = $(this).attr('id');
var val = $('#'+str+' option:selected').text();
$('#'+str+'_div').text(val);
})
<div id="depart_div"></div>;
ประวัติการแก้ไข 2016-01-13 10:05:15
Date :
2016-01-13 10:04:26
By :
loomoo
ปกติก็ใช้ .val() นะคับ
Code (PHP)
<script>
$("select").on('change',function(){
var str = $(this).attr('id');
var val = $('#'+str).val();
$('#'+str+'_div').text(val);
})
<div id="depart_div"></div>;
ประวัติการแก้ไข 2016-01-13 10:54:30
Date :
2016-01-13 10:53:57
By :
progamer2000
เราลอง <input name="boxnumber" id="boxnumber" type="text" /> มันไม่ทำงานเลยค่ะ ต้องแก้ไขอะไรอีกไหมค่ะ
Code (PHP)
<script>
$("select").on('change',function(){
var str = $(this).attr('id');
var val = $('#'+str).val();
$('#'+str+'_div').text(val);
});
</script>
<div id="boxnumber_div"></div>
ขอบคุณล่วงหน้าเลยค่ะ
Date :
2016-01-13 11:27:15
By :
loomoo
หมายถึงให้พิมพ์ละ ขึ้นข้างล่างหรอคับ มันก็ไม่ใช่ select on change แล้วนะ
Date :
2016-01-13 11:29:47
By :
progamer2000
ใช่ค่ะ อยากจะลองเปลี่ยน input type="text" มันต้องแก้ไขอะไรบ้างค่ะ
Code (PHP)
<script>
$("select").on('change',function(){
var str = $(this).attr('id');
var val = $('#'+str).val();
$('#'+str+'_div').text(val);
});
</script>
<input name="boxnumber" id="boxnumber" type="text" />
<div id="boxnumber_div"></div>
ประวัติการแก้ไข 2016-01-13 11:37:36
Date :
2016-01-13 11:37:07
By :
loomoo
Code (PHP)
<script>
$("input").on('keyup',function(){
var str = $(this).attr('id');
var val = $('#'+str).val();
$('#'+str+'_div').text(val);
});
</script>
<input name="boxnumber" id="boxnumber" type="text" />
<div id="boxnumber_div"></div>
Date :
2016-01-13 12:05:10
By :
progamer2000
Load balance : Server 05