javascript 선택 옵션 기능이 IE 및 사파리에서 작동하지 않습니다.

Question

이 문제에 대한 도움이 될 것입니다!

IE와 Safari에서만이 자바 스크립트 코드에 문제가 있습니다.

다른 브라우저 (예 : Firefox, Chrome)에서 제대로 작동합니다.

저는 IE와 Safari에서 모든 선택 옵션 값을 올바르게 순환하지 않는다고 생각합니다. 예 : 파이어 폭스에는 p 값이 두 가지 있지만 사파리 값은 1뿐입니다.

JAVASCRIPT

<script type="text/javascript"> 
function selected(val, val1) 
{ 
    var len = document.getElementById('attribute122').length; 
    var p; 
    for(p=0;p<len;p++) 
    { 
     if(document.getElementById('attribute122')[p].label == val1) 
     { 
      document.getElementById('attribute122').value = document.getElementById('attribute122')[p].value; 
      document.getElementById('att_'+val).className = 'active'; 
     } 
     else 
     { 
      if(document.getElementById('attribute122')[p].label !="Choose an Option...") 
      { 
       var chalpeveere = document.getElementById('attribute122')[p].label; 
       // alert(chalpeveere); 
       chalpeveere = chalpeveere.replace('.','_'); 
       // alert(chalpeveere); 
       document.getElementById('att_' + chalpeveere).className = 'none'; 
      } 
     } 
    } 
} 

</script> 

HTML

<div class="input-box"> 
<select id="attribute122" class="required-entry super-attribute-select" name="super_attribute[122]"> 
<option value="">Choose an Option...</option> 
<option value="3" price="0">Medium</option> 
</select> 
</div> 


<div class="Medium"> 
<a id="att_Medium" class="none" href="javascript:selected('Medium', 'Medium')"> </a> 
</div> 

Answer 1

일부 의견 :

function selected(val, val1) { 
    var len = document.getElementById('attribute122').length; 

훨씬 나아

이 요소에 대한 참조를 저장합니다. 선택 요소이면 길이가 옵션 수입니다. 그것은 그런 식으로 작성하는 명확입니다 :

var select = document.getElementById('attribute122'); 
    var len = select.options.length; 

를하지만 여기 len 설정 아래를 참조하지 않을 것입니다.

루프 카운터로 i, j, k 등을 사용하고 for 표현식에서 초기화하는 것이 훨씬 더 일반적입니다. 그것은 너무 여기에 제한을 설정하는 것이 일반적이다 : 다시

for (var i=0, len=select.options.length; i<len; i++) { 

     if (select[p].label == val1) { 

, 당신은 선택 요소의 특성으로 옵션에 액세스 할 수 있지만, 옵션 모음을 통해 그들에 액세스 할 수 명확합니다. 또한, label 속성은 더 일반적으로 그렇게 text로 알려져있다 :

 if (select.options[i].text == val1) { 

. 선택 요소의 값을 설정하여 선택된 옵션을 설정

는

 document.getElementById('attribute122').value = document.getElementById('attribute122')[p].value; 

가에 옵션을 설정 훨씬 더 일반적이다, 또한 아주 새로운 동작입니다 선택 :

 select.selectedIndex = i; 

또는

 select.options[i].selected = true; 

. 첫 번째 옵션입니다

 document.getElementById('att_'+val).className = 'active'; 
    } 
    else 
    { 
     if(document.getElementById('attribute122')[p].label !="Choose an Option...") 
     { 

Pesumably 그렇게 할 수 있습니다 단지 시험 :

 if (select.selectedIndex != 0) { 

.

  var chalpeveere = document.getElementById('attribute122')[p].label; 

가된다 :

  var chalpeveere = select.optoins[i].text; 

.

  // alert(chalpeveere); 
      chalpeveere = chalpeveere.replace('.','_'); 
      // alert(chalpeveere); 
      document.getElementById('att_' + chalpeveere).className = 'none'; 
     } 
     } 
    } 
    } 

은 그래서 정돈 코드가된다 :

<button id="att_Medium" class="none" onclick=" 
    selected('Medium', 'Medium') 
">Set selected</button> 

또는 사용 : 당신이 버튼을 원하는 경우

<a id="att_Medium" class="none" href="javascript:selected('Medium', 'Medium')">foo</a> 

이 버튼을 사용하십시오 HTML에서

function selected(val, val1) { 
    var select = document.getElementById('attribute122'); 
    var options = select.options; 

    for(var i=0, iLen=options.length; i<iLen; i++) { 

     if (options[i].text == val1) { 
      options[i].selected = true; 
      document.getElementById('att_'+val).className = 'active'; 

     } else { 

      if (select.selectedIndex != 0) { 
       var chalpeveere = options[i].text; 
       // alert(chalpeveere); 
       chalpeveere = chalpeveere.replace('.','_'); 
       // alert(chalpeveere); 
       document.getElementById('att_' + chalpeveere).className = 'none'; 
      } 
     } 
    } 
} 

스타일 스팬