'jQuery SelectBox'에 해당되는 글 2건

JQuery selectBox 유효성검사

2020/JQuery 2020. 2. 28. 13:12
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      //value값 가져오기
      function fnValuesel() {
        alert($("#PrettyGirls").val());
      }
      //text값 가져오기
      function fnTextValalert() {
        alert($("#PrettyGirls option:selected").text());
      }
      //인덱스값 가져오기
      function idxValueGo() {
        alert(
          $("#PrettyGirls option").index($("#PrettyGirls option:selected"))
        );
      }

      //value값으로 세렉트 시키는 방법 2가지
      function fnSelectedCombo() {
        var slcNumOp = $("#slcNum option:selected").val();
        console.log(slcNumOp);
        // var slcNumOpval = $("#slcNum option:selected").val();
      }

      function fnRemoveCombo() {
        var slcNumOp = $("#slcNum option:checked").val() - 1;
        console.log(slcNumOp);
        $("#slcNum option:eq('" + slcNumOp + "')").remove();
      }

      function fnAppendCombo() {
        var addSlcNum = $("#PrettyGirls option").size() + 1;
        $("#PrettyGirls").append(
          "<option value='" + addSlcNum + "'>연예인</option>"
        );
      }

      function fnReplaceCombo() {
        var slcNumOp = $("#slcNum option:selected").val() - 1;
        $("#PrettyGirls option:eq('" + slcNumOp + "')").replaceWith(
          "<option value='" +
            $("#slcNum option:selected").text() +
            "'>한효주</option>"
        );
      }
    </script>
    <title>selectBox 유효성 검사</title>
  </head>
  <body>
    <select id="PrettyGirls">
      <option value="numOne">신민아</option>
      <option value="numTwo">전지현</option>
      <option value="numThree">원빈</option>
      <option value="numFour">이나영</option>
      <option value="numFive">장동건</option>
      <option value="numSix">고소영</option>
    </select>

    <input type="button" value="value값" onclick="fnValuesel();" />
    <input type="button" value="text값" onclick="fnTextValalert();" />
    <input type="button" value="index값" onclick="idxValueGo();" />

    <select id="slcNum">
      <option value="1">num1</option>
      <option value="2">num2</option>
      <option value="3">num3</option>
      <option value="4">num4</option>
      <option value="5">num5</option>
      <option value="6">num6</option>
      <option value="7">num7</option>
    </select>

    <input type="button" value="선택" onclick="fnSelectedCombo();" />
    <input type="button" value="제거" onclick="fnRemoveCombo();" />
    <input type="button" value="추가" onclick="fnAppendCombo();" />
    <input type="button" value="교체" onclick="fnReplaceCombo();" />
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery 요소 추가(형제관계)  (0) 2020.02.29
JQuery 요소 감싸기, 요소 태그 넣기  (0) 2020.02.29
JQuery radio button 유효성 검사  (0) 2020.02.28
JQuery checkBox 유효성 검사  (0) 2020.02.28
JQuery hide, show  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery selectbox 확인

2020/JQuery 2020. 2. 28. 13:00
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        $(".submit").click(function(event) {
          //선택된 개수
          var count = $("select option:selected").val();
          if (count == 0) {
            alert("셀렉트박스를 선택해주세요.");
          } else {
            alert(count + "를 선택하셨습니다.");
          }
          //html 에서 a 태그나 submit 태그는 고유의 동작이 있다.
          //페이지를 이동시킨다거나 form 안에 있는 input 등을 전송한다던가 그러한 동작이 있는데 e.preventDefault 는 그 동작을 중단시킨다
          event.preventDefault();
        });
      });
    </script>
    <title>셀렉트박스 선택된 값 확인</title>
  </head>
  <body>
    <select id="food" class="infobox">
      <option value="0">Select a Food</option>
      <option value="Pizza $5">Pizza $5</option>
      <option value="HotDog $2">HotDog $2</option>
      <option vlaue="Coke $1">coke</option>
      <option value="French Fries $3">French Fries $3</option>
    </select>
    <input type="submit" class="submit" value="submit" />
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
JQuery 객체추가  (0) 2020.02.28
JQuery 속성추가  (0) 2020.02.28
JQuery 객체이동  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   2025/04   »
일 월 화 수 목 금 토
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

티스토리툴바