왜 새 선택 상자를 추가 한 후 재설정합니까?

Question

한 번이라도 IE6에서는 의도 한 결과를 얻지 만 FF (또는 Chrome)에서는 그렇지 않습니다.

JS를 사용하여 동적으로 생성되는 선택 상자 (리스팅 위치)가 있습니다. 사용자가 선택 상자를 더 추가 할 수있는 버튼이있어서 둘 이상의 위치를 ​​선택할 수 있습니다.

JS 코드가 새 선택 상자를 추가하면 이미있는 선택 상자가 '재설정'됩니다. 예 : 첫 번째 선택 상자에서 옵션을 선택하고 단추를 클릭하여 새 선택 상자를 추가하고 새 선택 상자가 추가되어 첫 번째 옵션이 표시되지만 첫 번째 선택 상자가 첫 번째 옵션으로 '다시 설정' 내가 이미 선택한 옵션에 반대했다.

페이지가 상쾌 해 보이는 것처럼 보이지만 그렇지 않습니다.

나는 무엇이 잘못 되었는가, 나는 각 상자에 유일한 ID를 우선적으로 할당하는 것을 시도했다. 여기 코드는 다음과 같습니다

HTML :

<!-- BEGIN select location box - "slb" --> 
    <div id="selectLocationBox"> 
     <div id="slb_top"> 
      select location(s) you wish to view results for: 
     </div> 
     <div id="slb_mid"> 
      <script language="javascript"> 
       add_LocationBar() 
      </script> 
     </div> 
     <div id="slb_bot"> 
      <a onclick="add_LocationBar()">add another location</a>    
      <input id="loc_hiddenInpt" type="hidden" runat="server" />  <!-- this hidden input box is used to save the part of query dealing with locations, JS will check any location drop down boxes and then put applicable part of query in this hidden input so ASP page can use it --> 
     </div> 
    </div> 

    <!-- END select location box - "slb" --> 

JS 코드 :

function add_LocationBar() { 

//create and populate array 
var ary_locations = new Array("SELECT", "--select--", "ABE", "Aberdeen, Scotland", "ABU", "Abu Dhabi, United Arab Emirates", "AAB", "Addis Ababa, Ethiopia", "ADD", "Addlestone, United Kingdom", "AKA", "Akasaka, Japan", "ALB", "Al Bidah, Kuwait", "ABA", "Albacete, Spain"); 

//create select drop down box 
var loc_select = document.createElement("select"); 

//populate select box with options from array 
for (var c = 0; c < ary_locations.length; c=c+2) { 
    var opt1 = document.createElement("option"); 
    opt1.value = ary_locations[c] 
    opt1.text = ary_locations[c+1] 
    loc_select.options.add(opt1); 
} 
//add drop down to box 
document.getElementById("slb_mid").appendChild(loc_select); 
document.getElementById("slb_mid").innerHTML += "<br />" 
} 

당신이 제공 할 수있는 어떤 도움/통찰력 사전에 감사합니다!

Answer 1

innerHTML을 사용하여 줄 바꿈을 추가 할 때 문제가 발생하는 것으로 보입니다. 나는 브라우저의 innerHTML을 값이 어떤 이유로 현재의 선택에 최신되지 않습니다 말할 수있는 지금까지

아래

document.getElementById("slb_mid").appendChild(loc_select); 
document.getElementById("slb_mid").appendChild(document.createElement("br")) 

처럼 다시에 appendChild를 사용해보십시오. 따라서 브라우저는 innerHTML의 현재 값을 잡고 <br/>을 추가하고 요소를 새로 고침하여 선택 항목을 지 웁니다. 이것은 당신 주위에 당신을 가져야한다.