2011-09-01 8 views
1

에서 HTML 값 :이상한 행동 jQuery를

<html> 
    <body> 
     <select class="FormInput" id="minheight" style="width: 120px;" name="minheight"> 
    <option selected="selected" value="">- Select -</option> 
    <option value=1>4' 0" (1.22 mts)</option> 
    <option value=2>4' 1" (1.24 mts)</option> 
    <option value=3>4' 2" (1.28 mts)</option> 
    <option value=4>4' 3" (1.31 mts)</option> 
    <option value=5>4' 4" (1.34 mts)</option> 
    <option value=6>4' 5" (1.35 mts)</option> 
    <option value=7>4' 6" (1.37 mts)</option> 
    <option value=8>4' 7" (1.40 mts)</option> 
    <option value=9>4' 8" (1.42 mts)</option> 
    <option value=10>4' 9" (1.45 mts)</option> 
    <option value=11>4' 10" (1.47 mts)</option> 
    <option value=12>4' 11" (1.50 mts)</option> 
    <option value=13>5' 0" (1.52 mts)</option> 
    <option value=14>5' 1" (1.55 mts)</option> 
    <option value=15>5' 2" (1.58 mts)</option> 
    <option value=16>5' 3" (1.60 mts)</option> 
    <option value=17>5' 4" (1.63 mts)</option> 
    <option value=18>5' 5" (1.65 mts)</option> 
    <option value=19>5' 6" (1.68 mts)</option> 
    <option value=20>5' 7" (1.70 mts)</option> 
    <option value=21>5' 8" (1.73 mts)</option> 
    <option value=22>5' 9" (1.75 mts)</option> 
    <option value=23>5' 10" (1.78 mts)</option> 
    <option value=24>5' 11" (1.80 mts)</option> 
    <option value=25>6' 0" (1.83 mts)</option> 
    <option value=26>6' 1" (1.85 mts)</option> 
    <option value=27>6' 2" (1.88 mts)</option> 
    <option value=28>6' 3" (1.91 mts)</option> 
    <option value=29>6' 4" (1.93 mts)</option> 
    <option value=30>6' 5" (1.96 mts)</option> 
    <option value=31>6' 6" (1.98 mts)</option> 
    <option value=32>6' 7" (2.01 mts)</option> 
    <option value=33>6' 8" (2.03 mts)</option> 
    <option value=34>6' 9" (2.06 mts)</option> 
    <option value=35>6' 10" (2.08 mts)</option> 
    <option value=36>6' 11" (2.11 mts)</option> 
    <option value=37>7' (2.13 mts) plus</option> 
    </select> &nbsp; to &nbsp; 
    <select class="FormInput" id="maxheight" style="width: 120px;" name="maxheight"> 
    <option selected="selected" value="">- Select -</option> 
    <option value=1>4' 0" (1.22 mts)</option> 
    <option value=2>4' 1" (1.24 mts)</option> 
    <option value=3>4' 2" (1.28 mts)</option> 
    <option value=4>4' 3" (1.31 mts)</option> 
    <option value=5>4' 4" (1.34 mts)</option> 
    <option value=6>4' 5" (1.35 mts)</option> 
    <option value=7>4' 6" (1.37 mts)</option> 
    <option value=8>4' 7" (1.40 mts)</option> 
    <option value=9>4' 8" (1.42 mts)</option> 
    <option value=10>4' 9" (1.45 mts)</option> 
    <option value=11>4' 10" (1.47 mts)</option> 
    <option value=12>4' 11" (1.50 mts)</option> 
    <option value=13>5' 0" (1.52 mts)</option> 
    <option value=14>5' 1" (1.55 mts)</option> 
    <option value=15>5' 2" (1.58 mts)</option> 
    <option value=16>5' 3" (1.60 mts)</option> 
    <option value=17>5' 4" (1.63 mts)</option> 
    <option value=18>5' 5" (1.65 mts)</option> 
    <option value=19>5' 6" (1.68 mts)</option> 
    <option value=20>5' 7" (1.70 mts)</option> 
    <option value=21>5' 8" (1.73 mts)</option> 
    <option value=22>5' 9" (1.75 mts)</option> 
    <option value=23>5' 10" (1.78 mts)</option> 
    <option value=24>5' 11" (1.80 mts)</option> 
    <option value=25>6' 0" (1.83 mts)</option> 
    <option value=26>6' 1" (1.85 mts)</option> 
    <option value=27>6' 2" (1.88 mts)</option> 
    <option value=28>6' 3" (1.91 mts)</option> 
    <option value=29>6' 4" (1.93 mts)</option> 
    <option value=30>6' 5" (1.96 mts)</option> 
    <option value=31>6' 6" (1.98 mts)</option> 
    <option value=32>6' 7" (2.01 mts)</option> 
    <option value=33>6' 8" (2.03 mts)</option> 
    <option value=34>6' 9" (2.06 mts)</option> 
    <option value=35>6' 10" (2.08 mts)</option> 
    <option value=36>6' 11" (2.11 mts)</option> 
    <option value=37>7' (2.13 mts) plus</option> 
    </select> 
    <span></span> 
    </body> 
</html> 

CSS의 :

.form-error { color:red; font-size:12px;} 
.form-info { color:#B1B1B1; font-size:12px;} 
.form-ok { color:green; font-size:12px; } 

및 스크립트 :

var minheight = $("#minheight"); 
var maxheight = $("#maxheight"); 
maxheight.blur(validatemaxheight); 

$('#minheight,#maxheight').change(function(){ 
     heightvalidate(); 
    }); 

function validatemaxheight() 
    { 
     heightvalidate(); 
    } 

function heightvalidate() 
    { 
     console.log('minheight:: '+minheight.val()+' maxheight:: '+maxheight.val()); 
     if(minheight.val() > maxheight.val()) 
     { 
      minheight.parent().find('span').attr("class","form-error").html("Minimum height should not be greater than maximum height.");  
      minheight.focus(); 
      return false; 
     } 
     else if(minheight.val() == maxheight.val()) 
     { 
      minheight.parent().find('span').attr("class","form-error").html("Minimum height should be less than maximum height.");  
      minheight.focus(); 
      return false; 
     } 
     else 
     { 
      minheight.parent().find('span').attr("class","form-ok").html('OK'); 
      return true; 
     }  
    } 

실제로 최소를 비교하고 높이와 최대 높이. minheight> max height이면 오류 메시지가 표시됩니다.

위의 조건은 minheight 값이 9 이상이고 maxheight 값이 9보다 커야 min까지의 높이가 될 때까지 정상적으로 작동합니다. minheight < maxheight에도 불구하고 여전히 minheight가 maxheight보다 큼을 나타내는 오류 메시지가 표시됩니다. 여기

라이브 버전 : 어떤 도움을 주시면 감사 http://jsfiddle.net/prajan55/u9NJD/

이 ..

답변

1

나는 검사가 문자열이 아닌 정수에이 일을하기 때문에이 생각, 당신은으로 parseInt를 사용하여 첫 번째 정수로 변환해야 (minheight.val())> parseInt (maxheight.val())

+0

이 현재 정상적으로 작동합니다. 고마워. 사미르. – prajan55

+0

위대한 !! 투표를 잊지 마세요.) –

3

이러한 값을 비교하기 전에 parseInt()를 사용하여 실제로는 문자열이 아닌 숫자로 비교하십시오.

+0

. WTK에게 감사드립니다. – prajan55

+0

도와 주셔서 감사합니다 :) – WTK