유효성 확인 후 값 유지

Question

여러 선택 옵션 목록 및 숨기기 선택 옵션을 사용하여 PHP 프로젝트 온라인 약속 양식을 개발 중입니다.

유효성 검사가 실패한 후 선택 옵션에서 값을 보유하는 데 문제가 있습니다.

내 선택 옵션은, 그냥이 fiddle 같은 일을 트리거

1 옵션을 선택 값은 다음 2 차 옵션을 선택 값이 이미지를 트리거합니다 두번째 선택 옵션을 트리거합니다. 첫 번째 선택 옵션 값은 retain이지만 두 번째 선택 옵션 값은 재설정됩니다.

값을 유지할 수 있지만 다른 옵션으로 변경하려면 이전 옵션의 값이 그대로 유지되고 새 값이 추가됩니다. 내가 원하는 것은 사용자가 다른 옵션을 변경하면 자동으로 null로 재설정되지만 유효성 검사가 실패하면 유지됩니다. 유효성 검사가 실패했을 때

이

$(document).ready(function(){ 
    $('#Service').change(function(){  
    $('#selectOp1').prop('selectedIndex',0); 
    $('#selectOp2').prop('selectedIndex',0); 
    $('#selectOp3').prop('selectedIndex',0); 
    $('div.second-level-container').children().hide(); //this one for hide the image 
)}; 

하지만, 선택된 값도 사라, 이것은 매우 자극적이다 :

내가이 jQuery로 명확한 값을 사용하고 있습니다. 누군가 내가 원하는 것을 선택할 수 있도록 도와 줄 수 있습니까? jquery에서 매우 새로운 것입니다.

Answer 1

//You can try this this will reset your select box values also 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#Rank').bind('change', function() { 
     var elements = $('div.container').children().hide(); // hide all the elements 
     var value = $(this).val(); 

     if (value.length) { // if somethings' selected 

      elements.filter('.' + value).show(); // show the ones we want 

      $('div.container div').children().each(function(){ 

       $.each(this.attributes, function(i, attrib){ 

        if(attrib.name != value) 
        { 
         $('#'+value).prop('selectedIndex',0); 
        } 

        }); 
      }); 

      var elements = $('div.second-level-container').children().hide(); // hide all the elements 

     //master reset 
     }else{ 

      $('#airman').prop('selectedIndex',0); 

      $('#senior-airman').prop('selectedIndex',0); 

      var elements = $('div.second-level-container').children().hide();    
     } 

    }).trigger('change'); 

    $('.second-level-select').bind('change', function() { 
     var elements = $('div.second-level-container').children().hide(); // hide all the elements 
     var value = $(this).val(); 

     if (value.length) { // if somethings' selected 
      elements.filter('.' + value).show(); // show the ones we want 

     //reset the child and  
     }else{ 

      var elements = $('div.second-level-container').children().hide(); // hide all the elements 
     } 
    }).trigger('change'); 
}); 
</script> 
<!-- Site JavaScript --> 
<select size="1" id="Rank" title="" name="Rank"> 
    <option value="">-Select Your Rank-</option> 
    <option value="airman">Airman</option> 
    <option value="senior-airman">Senior Airman</option> 
</select> 

<div class="container"> 
    <div class="airman"> 
     <select class="second-level-select" id='airman'> 
      <option value="">-Select Your Rank-</option> 
      <option value="basic-ore-1">Basic Ore Miner - Level 1</option> 
      <option value="basic-ore-2">Basic Ore Miner - Level 2</option> 
     </select> 
    </div> 
    <div class="senior-airman"> 
     <select class="second-level-select" id='senior-airman'> 
      <option value="">-Select Your Rank-</option> 
      <option value="omber-miner-1">Omber Miner - Level 1</option> 
      <option value="omber-miner-2">Omber Miner - Level 2</option> 
     </select> 
    </div> 
</div> 

<div class="second-level-container">  
    <div class="basic-ore-1"> 
     Line of text for basic ore miner 1 
    </div> 
    <div class="basic-ore-2"> 
     Line of text for basic ore miner 2 
    </div> 
    <div class="omber-miner-1"> 
     Line of text for omber miner 1 
    </div> 
    <div class="omber-miner-2"> 
     Line of text for omber miner 2 
    </div>  
</div>