선택 상자 옵션 텍스트 변경

Question

가장 가까운 div 영역에 파일 내용을로드하는 ajax 선택 상자에서 작업하고 있습니다. Demo. 아약스 콘텐츠를로드 할 때 첫 번째 옵션 텍스트 "선택"을 "숨기기"로 변경하려면 텍스트를 "숨기기"으로 다시 변경하십시오. "선택" 클릭 후.

코드 :

<select class="searchselectbox"> 
    <option value="#">Select</option> 
    <option data-file="fans.php">Fans</option> 
    <option data-file="stars.php">Stars</option> 

</select> 
<div class="selectboxarea"></div> 

내가 함수에이 줄을 사용해야

var area = $(".selectboxarea"); 
$(".searchselectbox").on('change', function (e) { 
    area.empty(); 
    var selected = $(this).find('option:selected'); 
    var loadfile = selected.data('file'); 

    if (loadfile) {  
     $(this).next('.selectboxarea').load(loadfile); 
     $(this).find('option:contains("Select")').text("Hide"); 
    } else { 
     window.location.href = $(this).val(); 
    } 
}); 

HTML?

$(this).find('option:contains("Hide")').text("Select"); 

당신은 그것의 텍스트를 필요로하는 <option>에 클래스를 추가 할 수 있습니다

Answer 1

는 같이 변경합니다 :

<option value="#" class="select">Select</option> 

그리고 파일 데이터있을 때 다음 JS는

var $this = $(this); 
var selected = $this.find('option:selected'); 
var loadfile = selected.data('file'); 

if (loadfile) {  
    $this.next('.selectboxarea').load(loadfile); 
    $this.find('.select').text('Hide'); 
    $this.find('.select').toggleClass('hide'); 
} else if (selected.hasClass('hide')) { 
    selected.text('Select'); 
    selected.toggleClass('hide'); 
} else { 
    window.location.href = $(this).val(); 
} 

것 속성에서 텍스트가 변경되고 클래스 "숨김"이 첫 번째 option에 추가됩니다. 그 후, 선택한 옵션의 클래스가 "숨김"이면 텍스트가 변경되고 클래스가 제거됩니다.

또한 나는 필요할 때마다 스크립트 모양을 왜곡하지 않는 것이 좋기 때문에 var $this = $(this);을 사용하여 jQuery 변수를 캐시합니다.

Answer 2

나는 이미 선택한 데이터를 숨기는 다중 선택을 시도하고 있다고 생각합니다. 음, 사용자에게 좋은보기 경험을 제공하려면 (예 : 여러 선택 (데모)에 대해서는 매우 지루합니다)이 jquery 라이브러리 (chosen)를 사용하십시오. 필자는 Ajax (예제 포함)를로드 할 때 항상이 옵션을 여러 선택에 사용했습니다. 보세요.