div로 감싸는 HTML 선택 요소가 있습니다. 기본적으로 사용자 지정 다중 선택 드롭 다운 상자를 만들기 때문에 사용자가 일반 옵션을 표시하는 대신 클릭하면 다중 선택 목록 상자가 아래의 div에 나타납니다. (이 버튼 바로 위에 작은 툴바 div가 있는데, 클릭하면 지우기 버튼이 나타나고, 모두 선택 버튼과 ok 버튼이 있습니다.) HTML select 요소는 unclickable이어야하며 런타임에 Javascript를 통해 선택한 항목을 포함해야합니다. 내 코드가 FireFox 및 Chrome에서 제대로 작동하지만 IE9에서는 옵션 선택 요소가 div로 감싸 졌을지라도 어떤 이유로 든 클릭 할 수 있습니다. 그것은 분명히 div 래퍼를 통해 피가 흘립니다. 내가 선택 옵션을 사용하지 못하게 할 수 있다는 것을 알고 있지만 사용 가능하게 보이기를 원합니다. 나는 HTML 옵션을 클릭 할 수있는 선택을 원하지 않기 때문에 div를 놓고 커서 유형을 포인터로 설정했습니다. 사용자가 HTML select 요소 위에 놓인 div를 클릭하고 그 아래에 내 팝업 목록 상자를 표시하여 효과적으로 사용자 정의 컨트롤을 만들길 원합니다. 여기 내 코드에서 발췌 문장입니다. JavaScript에서 동적으로 이것을 구축하고 끝에 el.innerHTML을 설정하고 있습니다. (BTW ... 나는이 프로젝트에 YUI와 프로토 타입,하지만 jQuery를 사용할 수 있습니다.)Div Internet Explorer에서 HTML 선택 요소 래핑
var listText = '<select id="' + this.key + '" format="MultiList" class="' + inputClass + '" value="' + val + '"><option name="">' + val + '</option></select>';
var markup = "<div id='listBoxCtrlWrap_"+this.key+"' style='display:inline-block; position:relative; cursor: pointer; width:100%;'>";
markup += listText;
markup += "<div id='divWrap_"+this.key+"' title='"+tooltip+"' style='position:absolute; left:0; right:0; top:0; bottom:0;'></div>";
markup += "<div id='listBoxWrap_"+this.key+"' style='display:none; cursor:default;'>";
markup += "<div id='listBoxToolbarWrap_"+this.key+"' style='position:absolute; left:0px; top:23px; height:23px; width:99.7%; z-index:90; background-color:#c7ccd2; ";
markup += "border:1px solid #575757; border-bottom-style:none;'/>";
markup += "<div style='position:absolute; left:6px; top:2px; z-index:95;'><img id='listBoxToolbarClear_"+this.key+"' style='cursor:pointer;' src='images/clear_btn.png'/></div>";
markup += "<div style='position:absolute; left:62px; top:2px; z-index:95;'><img id='listBoxToolbarSelectAll_"+this.key+"' style='cursor:pointer;' src='images/select_all_btn.png'/></div>";
markup += "<div style='position:absolute; right:10px; top:3px; z-index:95;'><img id='listBoxToolbarOKBtn_"+this.key+"' style='cursor:pointer;' src='images/blue_ok_btn.png'/></div>";
markup += "</div>";
markup += "<div style='position:absolute; left:0px; top:45px; height: 100%; width:100%; z-index: 100;'>";
markup += "<select id='listBoxSelector_"+this.key+"' multiple='multiple' style='height:83px'>";
markup += "<option name='loading'>Loading, please wait...</option>";
markup += "</select>";
markup += "</div>";
markup += "</div>";
markup += "</div>";
el.innerHTML = markup;
을 흥미롭게 나는 HTML의 경계 주위에 내 마우스 포인터를 올려 놓으면 내가 포인터 손 아이콘을 얻을 수 클릭 수를 선택 그것은 내 사용자 지정 목록 상자 div 엽니 다. 그러나 HTML의 가운데를 클릭하면 옵션 목록이 열립니다. (나는 그 중 하나가 사용자를 위해 열리지 않기를 바랄 뿐이다.) 이것은 IE에서 작동하지 않는다. 나는 IE9를 사용하고있다. 어떤 제안이나 아이디어가 잘못된 것일까 요?
여기 내 문제의 근본 원인을 보여주는 jsfiddle이 있습니다 ... http://jsfiddle.net/willjones/HpHQ3/ 선택되지 않은 상자가 있습니다. Chrome이나 Firefox에서 마우스로 선택 상자를 가리키면 포인터 마우스 아이콘이 표시되고 아무 것도 클릭하지 않습니다. 그러나 IE에서는 기본 화살표 마우스 아이콘이 표시되고 선택 상자를 클릭하면 열립니다 빈 줄 하나가 드러난다. IE가 다른 이유는 무엇입니까? 감사. – Will