2013-03-21 3 views
0

스크립트 (Smarty)로 동적으로 드롭 다운을 생성합니다.드롭 다운 값이 하나 인 경우 HTML, 표시 레이블

드롭 다운에 옵션 값이 하나만있는 경우 레이블로 표시 할 수 있습니까?

이렇게하면 3 개의 값이있는 드롭 다운이 표시됩니다.

<select> 
    <option> 1 </option> 
    <option> 2 </option> 
    <option> 3 </option> 
</select> 

그것은 단지 하나의 값은 다음 라벨로 표시 표시가 모두 순수 HTML 또는 JQuery와 또는 조합으로 가능하다면? 나는 똑똑한 값을 확인하고 다른 다른 HTML을 던져 사용할 수 있지만 많은 드롭 다운이 내 코드가 오래 걸릴 것입니다.

<select> 
    <option> 1 </option> 
</select> 

내가 누락되었을 수있는 간단한 논리가 있습니까?

UPDATE (해결) 도움이 모든 stackoverflow'ers에 ​​대한

감사합니다. 나는 필요에 따라 작동하는 @ahren이 제공 한 코드를 사용했습니다. 누군가가

// To replace a <select>, with <label> tag if it has just one value 
$('select').each(function(){ 
    if($(this).find('option').length === 1){ 

     // Copy all attributes from a given tag and save it in a variable. 
     var attributes_from = $(this).prop("attributes"); 
     var attributes_to = ''; 
     $.each(attributes_from, function() { 
      attributes_to += ' '+this.name+'="'+this.value+'"'; 
     }); 

     // If select then copy its value from option. 
     attributes_to += ' value="'+$(this).find('option').attr('value')+'"'; 

     // Replace the <tag> 
     $(this).replaceWith(function(){ 
      return $('<label '+attributes_to+' />').html($(this).text()); 
     }); 
    } 
}); 

답변

3
$('select').each(function(){ 
    if($(this).find('option').length === 1){ 
    $(this).replaceWith(function(){ 
     return $('<label />').html($(this).text()); 
    }); 
    } 
}); 

를 찾고 있다면 당신은 당신의 드롭 다운을 생성 한 후에 나는 경우에, 다른 하나 개의 태그의 속성을 복사하는 코드를 확대 그러나

, 당신은이를 실행할 수 있습니다 스 니펫으로 각 select 요소를 확인하십시오.

는 DEMO : http://jsfiddle.net/kqunE/

+0

작고 스마트 한 기능을 이용해 주셔서 감사 드리며,이 7 줄의 코드와 관련하여 하루 동안 저의 머리를 긁적니다. –

1

나는 그들이 가지고있는 옵션의 수를 확인하면서 <select>의 각 요소를 반복하고, 필요한 DOM 할 것 그에 따라 변경 :

$('select').each(function(index, select) { 
    var numOptions = $('option', this).length; 
    if(numOptions === 1) { 
     // replace the select element here - something like the below 
     var label = $('<label>').html(this.value); 
     $(this).after(label).hide(); 
    } 
}); 

내가 숨길 선택했다, <select> 요소를 바꾸는 대신 양식의 일부로 다시 값을 보냅니다. 그럴 필요가 없다면 .hide() 대신 .remove()을 사용하여 요소를 완전히 제거 할 수 있습니다.

+0

안녕하세요, @ Anthony도 도움 주셔서 감사합니다. 코드를 테스트하지는 않았지만 코드가 (at) ahren과 동일한 논리적 단계를 따르고 작동해야합니다. –

관련 문제