[JavaScript]form 응용하기

[JavaScript]form 응용하기

콤보박스

1.상품 콤보박스에서 셔츠를 선택하면 사이즈 콤보박스가 나타나게 만든다.

html

    <form class="container my-5">
      <div class="form-group">
    
        <p>상품선택</p>
        <select class="form-control" id="option1">
          <option>모자</option>
          <option>셔츠</option>
        </select>

        <div class="size-select">
          <p class="mt-4">사이즈선택</p>
          <select class="form-control" id="option2">
            <option>95</option>
            <option>100</option>
            <option>105</option>
          </select>
      </div>
      </div>
    </form>

css

.size-select{
    display: none;
}

js

      $("#option1").on("change",function(){
        if($("#option1").val() == "셔츠"){
          $(".size-select").show();
        }else {
          $(".size-select").hide();
        }
      });

 

2.상품 콤보박스에서 바지를 클릭하면 사이즈가 부분이 변경된다.

html

    <form class="container my-5">
      <div class="form-group">
    
        <p>상품선택</p>
        <select class="form-control" id="option1">
          <option>모자</option>
          <option>셔츠</option>
          <option>바지</option>
        </select>

        <div class="size-select">
          <p class="mt-4">사이즈선택</p>
          <select class="form-control" id="option2">
       
          </select>
      </div>
      </div>
    </form>

js

$("#option1").on("change",function(){

        var 셔츠 = [95,100,105];
        var 바지 = [28,39,32];
        
        if($("#option1").val() == "셔츠"){

          $("#option2").empty();

          var template = `<option>95</option>
                                    <option>100</option>
                                    <option>105</option>`;
                                    
          $("#option2").append(template);
          $(".size-select").show();

        }else if($("#option1").val() == "바지"){

          var template = `<option>28</option>
                          <option>30</option>
                          <option>32</option>`;
        $("#option2").append(template);
        $(".size-select").show();
        }elseP
          $(".size-select").hide();
      });

 

3.반복문으로 상품 사이즈를 동적으로 만드는 방법

js

      var 셔츠 = [95,100,105,110];
      var 바지 = [28,39,32,34,36];
      
      $("#option1").on("change",function(){

        if($("#option1").val() == "셔츠"){

          $("#option2").empty();

          for(var i = 0; i < 셔츠.length; i++){
            var template = `<option>${셔츠[i]}</option>`;
            $("#option2").append(template);
          }

          $(".size-select").show();
        }else if($("#option1").val() == "바지"){

          $("#option2").empty();

          for(var i = 0; i < 바지.length; i++){
            var template = `<option>${바지[i]}</option>`;
            $("#option2").append(template);
          }

          $(".size-select").show();
        }else{
          $(".size-select").hide();
        }
      });

4.forEach문으로 상품 사이즈 동적으로 만드는 방법

js

      var 셔츠 = [95,100,105,110];
      var 바지 = [28,39,32,34,36];
      
      $("#option1").on("change",function(){

        if($("#option1").val() == "셔츠"){

          $("#option2").empty();

          셔츠.forEach(function(i){
            var template = `<option>${i}</option>`;
            $("#option2").append(template);
            $(".size-select").show();
          });

         }else if($("#option1").val() == "바지"){

            $("#option2").empty();
  
            바지.forEach(function(i){
              var template = `<option>${i}</option>`;
              $("#option2").append(template);
              $(".size-select").show();
            });
            
         }else{
            $(".size-select").hide();
          }
        });

 

form 관련 이벤트 리스너

change : 값을 변경하고 포커스를 이동하면 발동하는 이벤트

input : 값이 변경되면 발동하는 이벤트

예제

      $("input").on("input",function(){
        alert("changed!");
      });
      $("input").on("change",function(){
        alert("changed!");
      });