[Dev]JQuery

jQuery Form post send

2022년 04월 28일 golgol 0

Ajax 말고 Form 으로 전송

toggle 내용 보이기 감추기

2022년 02월 25일 golgol 0

Remark : 클릭시 div 내용 보이기 Html + CSS + JQuery

JQuery for Element loop

2018년 09월 12일 golgol 0


        <style type="text/css">
          div.container {text-align: center; padding-top: 5px;}
          h2 {background-color: #7ab800; color:white; text-align: center;}
          table {border: 0px: padding: 0px; border-collapse: collapse; margin:10px;}
          td {text-align: center; font-size:9pt; border: 1px solid #0075b0; width:20px }
          td.legend {font-size:10pt; text-align:left; border:0px; padding-right:6px;width:310px}
          
          td.outside, td.wing {border: none; }
          td.wing {background-color: #DCDCDC; width:75px }
          td.exitLeft {text-align:right;font-weight:bold;}
          td.exitRight {text-align:left;font-weight:bold;}

          td.occupied  {background-image: url("images/Unavailable.jpg");background-repeat: no-repeat;cursor: not-allowed;}

          td.aisle {text-align: center; font-size:9pt; border:0x solid #0075b0; width:20px }
		  td.aisleUpper {font-weight:bold; border-top:none; border-bottom: none;}
          td.aisleUpper {background-color: #333333;border: 0px solid #0075b0; color: white;}

          td.noseat {border:none; border: 0px solid #0075b0; width:20px; cursor: not-allowed;}
          td.availableHandicap {background-image: url("images/Handicapped.jpg");background-repeat: no-repeat}
          td.availableSeat {background-image: url("images/Available.jpg");background-repeat: no-repeat;cursor:pointer;}
		  td.availableSeat.active {background-image: url("images/Selected.jpg");background-repeat: no-repeat;cursor:pointer;}
		  
		  td.blockedSeat {background-image: url("images/Blocked.jpg");background-repeat: no-repeat;cursor: not-allowed;}
		  td.selectedSeat {background-image: url("images/Selected.jpg");background-repeat: no-repeat;cursor:pointer;}

		  td.fontBold {font-weight:bold;} 
		  td.fontDarkGrey {color:#A9A9A9;} 
		  
        </style>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
	  <script>
		$(document).ready(function(){
		  $(".availableSeat").click(function(){
		    var id = $(this).attr("id");
			$("#SeatNum").val(id); 
		   
			$(".availableSeat.active").each(function(){
				 $(this).removeClass("active");
			});
			
			$(this).toggleClass("active");
		  });
		});
		
	  </script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

div.container {text-align: center; padding-top: 5px;}

h2 {background-color: #7ab800; color:white; text-align: center;}

table {border: 0px: padding: 0px; border-collapse: collapse; margin:10px;}

td {text-align: center; font-size:9pt; border: 1px solid #0075b0; width:20px }

td.legend {font-size:10pt; text-align:left; border:0px; padding-right:6px;width:310px}

td.outside, td.wing {border: none; }

td.wing {background-color: #DCDCDC; width:75px }

td.exitLeft {text-align:right;font-weight:bold;}

td.exitRight {text-align:left;font-weight:bold;}

td.occupied {background-image: url("images/Unavailable.jpg");background-repeat: no-repeat;cursor: not-allowed;}

td.aisle {text-align: center; font-size:9pt; border:0x solid #0075b0; width:20px }

td.aisleUpper {font-weight:bold; border-top:none; border-bottom: none;}

td.aisleUpper {background-color: #333333;border: 0px solid #0075b0; color: white;}

td.noseat {border:none; border: 0px solid #0075b0; width:20px; cursor: not-allowed;}

td.availableHandicap {background-image: url("images/Handicapped.jpg");background-repeat: no-repeat}

td.availableSeat {background-image: url("images/Available.jpg");background-repeat: no-repeat;cursor:pointer;}

td.availableSeat.active {background-image: url("images/Selected.jpg");background-repeat: no-repeat;cursor:pointer;}

td.blockedSeat {background-image: url("images/Blocked.jpg");background-repeat: no-repeat;cursor: not-allowed;}

td.selectedSeat {background-image: url("images/Selected.jpg");background-repeat: no-repeat;cursor:pointer;}

td.fontBold {font-weight:bold;}

td.fontDarkGrey {color:#A9A9A9;}

</style>

$(document).ready(function(){

$(".availableSeat").click(function(){

var id = $(this).attr("id");

$("#SeatNum").val(id);

$(".availableSeat.active").each(function(){

$(this).removeClass("active");

});

$(this).toggleClass("active");

});

</script>

jQuery 콤보박스 select 제어

2014년 01월 09일 golgol 0


jQuery로 선택된 값 읽기
$("#selectBox option:selected").val();
$("select[name=name]").val();
 
jQuery로 선택된 내용 읽기
$("#selectBox option:selected").text();
 
선택된 위치
var index = $("#test option").index($("#test option:selected"));
 
-------------------------------------------------------------------
 
// Add options to the end of a select
$("#selectBox").append("<option value='1'>Apples</option>");
$("#selectBox").append("<option value='2'>After Apples</option>");
 
// Add options to the start of a select
$("#selectBox").prepend("<option value='0'>Before Apples</option>");
 
// Replace all the options with new options
$("#selectBox").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option>");
 
// Replace items at a certain index
$("#selectBox option:eq(1)").replaceWith("<option value='2'>Some apples</option>");
$("#selectBox option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");
 
// 지정된 index 값으로 select 하기
$("#selectBox option:eq(2)").attr("selected", "selected");
 
// text 값으로 select 하기
$("#selectBox").val("Some oranges").attr("selected", "selected");
 
// value 값으로 select 하기
$("#selectBox").val("2");
 
// 지정된 인덱스 값의 item 삭제
$("#selectBox option:eq(0)").remove();
 
// 첫번째 item 삭제
$("#selectBox option:first").remove();
 
// 마지막 item 삭제
$("#selectBox option:last").remove();
 
// 선택된 옵션의 text 구하기
alert($("#selectBox option:selected").text());
 
// 선택된 옵션의 value 구하기
alert($("#selectBox option:selected").val());
 
// 선택된 옵션 index 구하기
alert($("#selectBox option").index($("#selectBox option:selected")));
 
// SelecBox 아이템 갯수 구하기
alert($("#selectBox option").size());
 
// 선택된 옵션 앞의 아이템 갯수
alert($("#selectBox option:selected").prevAll().size());
 
// 선택된 옵션 후의 아이템 갯수
alert($("#selectBox option:selected").nextAll().size());
 
// Insert an item in after a particular position
$("#selectBox option:eq(0)").after("<option value='4'>Some pears</option>");
 
// Insert an item in before a particular position
$("#selectBox option:eq(3)").before("<option value='5'>Some apricots</option>");
 
// Getting values when item is selected
$("#selectBox").change(function() {
           alert($(this).val());
           alert($(this).children("option:selected").text());
});
[출처] jQuery 콤보 select 제어하기|작성자 열린문서
 삭제

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

jQuery로 선택된 값 읽기

$("#selectBox option:selected").val();

$("select[name=name]").val();

jQuery로 선택된 내용 읽기

$("#selectBox option:selected").text();

선택된 위치

var index = $("#test option").index($("#test option:selected"));

-------------------------------------------------------------------

// Add options to the end of a select

$("#selectBox").append("<option value='1'>Apples</option>");

$("#selectBox").append("<option value='2'>After Apples</option>");

// Add options to the start of a select

$("#selectBox").prepend("<option value='0'>Before Apples</option>");

// Replace all the options with new options

$("#selectBox").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option>");

// Replace items at a certain index

$("#selectBox option:eq(1)").replaceWith("<option value='2'>Some apples</option>");

$("#selectBox option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");

// 지정된 index 값으로 select 하기

$("#selectBox option:eq(2)").attr("selected", "selected");

// text 값으로 select 하기

$("#selectBox").val("Some oranges").attr("selected", "selected");

// value 값으로 select 하기

$("#selectBox").val("2");

// 지정된 인덱스 값의 item 삭제

$("#selectBox option:eq(0)").remove();

// 첫번째 item 삭제

$("#selectBox option:first").remove();

// 마지막 item 삭제

$("#selectBox option:last").remove();

// 선택된 옵션의 text 구하기

alert($("#selectBox option:selected").text());

// 선택된 옵션의 value 구하기

alert($("#selectBox option:selected").val());

// 선택된 옵션 index 구하기

alert($("#selectBox option").index($("#selectBox option:selected")));

// SelecBox 아이템 갯수 구하기

alert($("#selectBox option").size());

// 선택된 옵션 앞의 아이템 갯수

alert($("#selectBox option:selected").prevAll().size());

// 선택된 옵션 후의 아이템 갯수

alert($("#selectBox option:selected").nextAll().size());

// Insert an item in after a particular position

$("#selectBox option:eq(0)").after("<option value='4'>Some pears</option>");

// Insert an item in before a particular position

$("#selectBox option:eq(3)").before("<option value='5'>Some apricots</option>");

// Getting values when item is selected

$("#selectBox").change(function() {

alert($(this).val());

alert($(this).children("option:selected").text());

});

[출처] jQuery 콤보 select 제어하기|작성자 열린문서

삭제

jQuery Form post send

toggle 내용 보이기 감추기

JQuery for Element loop

jQuery 콤보박스 select 제어

JQuery mobile facebook/youtube style menu

JQuery 창시자 존 레식

jQuery Tutorial – 004 – Testing jQuery

jQuery Tutorial – 003 – Implementing jQuery

jQuery Tutorial – 002 – An Example

jQuery Tutorial – 001 – Introduction to jQuery