|
 |
| |
ถามเรื่อง list menu แสดงค่าสลับกัน เมื่อมีการคลิก radio button ครับ |
| |
 |
|
|
 |
 |
|
ขอใช้ jQuery นะครับ
ก่อนอื่น หน้าตาแบบฟอร์มคงจะเป็นประมาณนี้นะครับ
Code
<select name="amount">
<option value="thb1">1,000 - 5,000 (THB)</option>
<option value="thb2">1,500 - 2,000 (THB)</option>
</select>
<input type="radio" name="currency" value="thb" checked>THB
<input type="radio" name="currency" value="usd">USD
ไอเดียของเราก็คือ ถ้า input[name=currency] เกิดการเปลี่ยนค่า (onChange) เราก็จะทำการเปลี่ยน option ของ select[name=amount] ตามค่าที่ถูกเลือกของ input[name=currency]
ดังนั้นสิ่งที่เราต้องทำคือ ใส่ตัวดัก event onChange ของ input[name=currency] ลงไปก่อนแบบนี้ครับ
Code (JavaScript)
<script type="text/javascript">
$(function(){
$('input[name=currency]').change(function(){
alert($(this).val());
});
});
</script>
นี่เป็นวิธีดัก event นะครับ ซึ่งถ้าเกิดมีการเปลี่ยนแปลงข้อมูล มันก็จะมี alert ขึ้นมา (เพราะผมใส่ alert ไว้ในโค้ด)
ต่อไปเราก็ทำการดูว่า ค่าของ input[name=currency] มีค่าเป็นอะไร เพื่อจะได้นำไปพิจารณาว่าจะใส่อะไรลงไปใน option
Code (JavaScript)
<script type="text/javascript">
$(function(){
$('input[name=currency]').change(function(){
if($(this).val() == 'thb'){
}else{
}
});
});
</script>
ขั้นตอนต่อไป เป็นการเปลี่ยน option ที่อยู่ใน select ซึ่งอันที่จริงมันไม่ใช่การเปลี่ยน แต่เป็นการลบออก แล้วใส่เข้าไปใหม่ครับ
$('select[name=amount] option').remove(); บรรทัดนี้คือการลบ option ออกไปให้หมดก่อน
$('select[name=amount]').append(option1); บรรทัดนี้คือการใส่ option เข้าไปใหม่ 1 อัน
Code (JavaScript)
<script type="text/javascript">
$(function(){
$('input[name=currency]').change(function(){
var option1,option2;
if($(this).val() == 'thb'){
option1 = $('<option/>',{value:'thb1'}).html('1,000 - 5,000 (THB)');
option2 = $('<option/>',{value:'thb2'}).html('1,500 - 2,000 (THB)');
}else{
option1 = $('<option/>',{value:'usd1'}).html('35 - 50 (USD)');
option2 = $('<option/>',{value:'usd2'}).html('50 - 75 (USD)');
}
$('select[name=amount] option').remove();
$('select[name=amount]').append(option1);
$('select[name=amount]').append(option2);
});
});
</script>
ลองทำตามดูเป็นขั้นๆ เหมือนที่ผมอธิบาย จะได้เข้าใจนะครับ
|
ประวัติการแก้ไข
2013-02-28 12:29:35
 |
 |
 |
 |
| Date :
2013-02-28 12:28:00 |
By :
earthchie |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
 เยี่ยมไปเลยครับ
|
| |
|
|
| |
| Date :
2013-02-28 12:40:18 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณมากๆเลยนะครับ คุณวิน และคุณ earthchie ผมจะลองทำตามดูครับ
|
| |
|
|
| |
| Date :
2013-03-01 22:57:41 |
By :
pingjiab |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เป็นอีกทางเลือกนึงครับ ขอแวะเข้ามาทักทายหลานชายนิดส์นึง ฮ๋าๆๆ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Unidentifier">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
</head>
<body>
<form method="post" action="">
<select id="currency" name="currency" style="width:200px;">
</select>
<input type="radio" value="THB" name="currencyChoice" />THB
<input type="radio" value="USD" name="currencyChoice" />USD
<br />
<input type="submit" value="บันทึก" id="submitForm" />
</form>
<script>
var currencyTHB = {"THB1":"1,000THB-1,500THB","THB2":"1,500THB-2,000THB","THB3":"2,000THB-2,500THB"};
var currencyUSD = {"USD1":"35USD-50USD","USD2":"50USD-65USD","USD3":"65USD-80USD"};
var currencyBox = $("select#currency");
var OptionsTHB,OptionsUSD;
// สร้างตัวเลือกสกุลเงินบาท
$.each(currencyTHB,function(index,item){
OptionsTHB += "<option value='"+index+"'>"+item+"</option>";
});
// สร้างตัวเลือกสกุลเงินดอลลาร์
$.each(currencyUSD,function(index,item){
OptionsUSD += "<option value='"+index+"'>"+item+"</option>";
});
// ตั้งค่าเริ่มต้นเป็นสกุลเงินบาท
$(currencyBox).append(OptionsTHB);
$("input[name='currencyChoice']").change(function(){
var choice = $(this).val();
$("option",currencyBox).remove();
if(OptionsTHB.indexOf(choice) >=0 ){ // ตรวจสอบตัวเลือกจากการกด เรดิโอ เทียบกับตัวแปรที่เก็บสกุลเงินบาท
$(currencyBox).html(OptionsTHB);
}else{
$(currencyBox).append(OptionsUSD);
}
});
</script>
</body>
</html>
|
| |
|
|
| |
| Date :
2013-03-02 02:16:26 |
By :
sakuraei |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เพิ่งรู้ว่า Unidentifier นี่ไอดีกู๋ป้อนะครับเนี่ย 55
|
| |
|
|
| |
| Date :
2013-03-02 12:05:12 |
By :
earthchie |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
รู้สึกเป็นบุญอย่างยิ่งครับ ที่มีท่านเทพทั้งหลายมาสงเคราะห์ ขอบคุณมากๆเลยนะครับ
|
| |
|
|
| |
| Date :
2013-03-02 13:39:28 |
By :
pingjiab |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
