2012-07-24 3 views
0

모든 옵션 (1,2,3)을 볼 때 옵션 목록에서 기본 옵션을 숨기고 있습니다. (첫 번째 선택을 클릭 할 때 클릭)하지만 다음을 수행 한 후에 어떻게 든 다시 나타나야합니다. 선택을 다시 한 번보고 ... (페이지 새로 고침으로 사용자가 '욕실'카테고리를 포함하는 선택 상자를 볼 수 있음) 그렇지 않은 경우 1,2,3이 나타납니다.jquery select 옵션 기본값 숨기기 및 다시 나타 내기

옵션이 만들어지고 나서 선택 상자가 다시 클릭되면 현재 '욕실'이 다시 나타나지 않습니다. (사용자가 마음을 바꾼다면) 이것이 문제입니다. 이를 수행하는 가장 좋은 방법은 무엇입니까?

나는 html을 바꿀 수 없다 - 이것은 Jquery에서만 할 필요가있다. 도움말

<select name="searchForm__bathrooms" id="field-searchForm__bathrooms" class="field- dropdown"> 
    <option value=""> Bathrooms </option> 
    <option value="1"> 1 </option> 
    <option value="3"> 3 </option> 
    <option value="2"> 2 </option> 
</select> 

$('select option:first-child').hide(); 
+0

_ "이 작업을 수행하는 가장 좋은 방법은 무엇입니까."_하십시오 -'

+1

DOM을 수정할 수없는 곳에서 무엇을 개발하고 있습니까? 브라우저 사양에 따라 옵션 태그를 숨길 수 없습니다. 이전에는 크로스 브라우저 해킹이 있었지만 로그가 작동하지 않습니다. http://jsfiddle.net/EfMvd/16/ –

답변

1

http://jsfiddle.net/earlonrails/EfMvd/2/

자바 스크립트

$(function() { 
    $("#field-searchForm__bathrooms").change(function() { 
     var selectEle = $(this); 
     var doAppend = true; 
     $.each(selectEle.children(), function(index, child) { 
      if (child.value == "0") { 
       doAppend = false; 
      } 
     }); 
     if (doAppend) { 
      selectEle.append('<option name="bathroom" value="0">Bathrooms</option>'); 
     } 
    }); 
}); 

HTML

<body> 
    <select name="searchForm__bathrooms" id="field-searchForm__bathrooms" class="field-dropdown"> 
     <option value="1"> 1 </option> 
     <option value="2"> 2 </option> 
     <option value="3"> 3 </option> 
    </select> 
</body>​ 
+0

감사합니다 earlonrails, 아주 가깝습니다. 그러나 html을 바꿀 수는 없습니다. [욕실도 옵션입니다.] 기본 옵션으로 욕실이 필요합니다. '욕실'은 모든 상황에서 정확히 한 번 나타납니다. [드롭 다운보기/보이지 않는, 옵션 1,2,3 선택한 다음 드롭 다운보기 ..] - nnnnn, 고마워 그래, 그 라벨은이 기능이 있어야한다는 것을 이해하지만 selectbox 밖에는 아무 공간도 없으므로 이 옵션이 가장 쉽고/좋은 옵션이라고 생각하지 않았습니다. –

+0

선택 옵션의 경우 브라우저간에 표시 속성을 사용하려고 할 때 문제가 발생합니다. 따라서 노드를 추가하는 것이 좋습니다. 다음은 옵션 태그 문제에 관한 게시물입니다. http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css. 내 경험상 당신은 옵션을 숨길 수 없습니다. 어쩌면이 같은 타협이 당신을 위해 일할 것입니다. http://jsfiddle.net/earlonrails/EfMvd/12/ – earlonrails

+0

+1 형제! 그리고 답을 수락하십시오 : D – earlonrails

0
$("#field-searchForm__bathrooms").click(function(){ 
    $('select option:first-child').toggle(); 
})