2013-02-21 2 views
4

HTML에 하나씩 두 개의 선택 상자가 있습니다.두 개의 선택 상자가 겹침

  • 첫 번째 선택 상자는 내가 처음 select box 클릭하면 디폴트로 열린 두 번째 선택 박스 지금

을 (옵션 클릭없이 표시되는 것을 의미)

  • 정상이 다른 뒤에 내용으로 이동입니다 select box.

    HTML

    <form> 
        <li> 
         <label class="labelwid" for="partner">Select partner*</label> 
          <select name="partner" id="partner" class="validate[required] text-input selectbox customselect" style="width:275px !important"> 
           <option value="{partnerno}">{partnername}</option> 
          </select> 
        </li> 
        <li> 
         <div class="fl"><b>Market Application</b><br /> 
          <select name="markappcategory[]" id="category" multiple="multiple" class="validate[required] text-input selectbox" style="width:230px !important"> 
           {categoryname_html_m} 
          </select> 
         </div> 
        </li> 
    </form> 
    

    사용자 선택은 사용자 입력에 대한 jquery 플러그인입니다.

    CSS first select box

    position:absolute; top:40px; padding:2px 0 5px 0; left:0; overflow-x:hidden; overflow-y:auto; z-index:1000; background:#fff; border:1px solid #d1cdcd; border-top:none; font-size:15px; width:265px; left:4px; height:100px; 
    
  • +0

    코드를 볼 수 있습니까? 너 이미 벌써 봤던거야? – Killrawr

    +0

    jquery를 사용하여 두 번째 선택 상자 목록을 기본적으로 표시했습니다. – Tushar

    +0

    'css '도 볼 수 있습니까? :) – Killrawr

    답변

    2

    z-indexes 같은 레벨에서 비교하면 부모가 다른 두 요소가 부모 Z- 색인과 관련하여 z- 색인화된다는 것을 의미합니다 (예 : http://jsfiddle.net/pavloschris/5tLrz/). 이런 종류의 문제가 생길 때 대개 그런 문제가 있습니다.

    +0

    그의 문제는 위에 div 태그가 없습니다. Z 인덱스를 사용하여 특정 div (oe 모든 태그)를 맨 위에 만들 수 있습니다. 여기서는 위치 문제로 인해 제대로 설정되지 않았습니다. –

    +0

    나는 sa 'behind'와 'bellow'가 아니기 때문에 'z-index' 문제라고 생각한다. – xpy

    +1

    그는 그것을 오용 한 것일 수 있습니다. 그는 양식을 사용하고 있습니다. 양식에서 z 색인을 사용하여 다른 요소 뒤에 일부 요소를 숨기면 이해가되지 않습니다. –

    1

    당신은 스타일 태그에 position을 지정하지 않습니다. 당신은 당신의 CSS에서 그것을하고 있습니까? 그렇다면 CSS 코드를 게시하십시오. 자세한 내용은 http://www.w3schools.com/cssref/pr_class_position.asp을 참조하십시오.

    +0

    예, 시도했지만 작동하지 않습니다. – Tushar

    +0

    질문에서 해당 코드를 업데이트 할 수 있습니까? 당신은 그 실수 만하고 있습니다. –

    +0

    @Tushar 위치는'parent' 요소로 덮어 쓸 수 있습니다. 'position : (여기에 어떤 위치)! important;'를 추가해보십시오. – Killrawr

    1
    <form> 
        <li> 
         <label class="labelwid" for="partner" style="position: absolute; top: 10; left:10;" >Select partner*</label> 
         <select name="partner" id="partner" class="validate[required] text-input selectbox customselect" style="position: absolute; top: 10; left:200; width:275px !important"> 
          <option value="{partnerno}">{partnername}</option> 
         </select> 
        </li> 
        <li> 
         <div class="fl"> 
          <label style="position: absolute; top: 200; left:10;"><b>Market Application</b></label><br /> <select name="markappcategory[]" id="category" multiple="multiple" class="validate[required] text-input selectbox" style="position: absolute; top: 200; left:200; width:230px !important"> {categoryname_html_m} </select> 
         </div> 
        </li> 
    

    이 코드 만 사용해보십시오. 그것은 나를 위해 잘 작동합니다. 필요에 따라 직책을 변경하십시오.

    관련 문제