<select> 목록에 텍스트 줄 바꿈

사용자에게 여러 요소를 선택할 수있는 권한을 부여하고 싶습니다. 문제는 html의 표준 select multiple이 (선택에 따라) 하나의 라인 당 하나의 라인이라는 것입니다. 선을 오래 가게하면 레이아웃이 매우 엉망이되는 문제입니다. 또한 줄을 자르면 텍스트의 주요 요점이 사라집니다. 자바 스크립트로이 문제를 해결할 수있는 방법이 있습니까? 모든 텍스트를 표시하고 콜론으로 구분 된 목록에 값을 반환 할 수있는 대안이 있습니까?<select> 목록에 텍스트 줄 바꿈

출처

2009-11-24 jle

이렇게 할 수있는 방법이 많이 있습니다. 가장 간단한 방법은 각 단락 옆에 체크 박스를 두는 것입니다. 사용자는 자신이 선택한 단락 옆에있는 상자를 확인할 수 있습니다. 당신이 마음에서 부드러운 인터페이스가있는 경우

, 당신은 다음, CSS와 체크 박스를 숨어 CSS를 적용하여 (해당 단락을 클릭하고 단락을 강조 할 때 선택 확인란을 에 자바 스크립트를 사용하여 그 아이디어를 확장 할 수 있습니다 클래스)를 선택하여 표시합니다. jQuery와 같은 프레임 워크는이 프로세스를 간소화합니다.

편집 : 나는 그것을 생각 이제만큼 당신이 당신도 숨겨진 확인란의 선택을 취소/체크 자바 스크립트를 필요로하지 않는 <label> 요소의 각 단락을 넣어; 라벨의 for 속성이 올바르게 설정되어있는 한 자동으로 업데이트됩니다. JavaScript를 사용하려면 레이블을 강조 표시하거나 강조 표시를 해제해야합니다.

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    input.hidden-checkbox { display: none; } 
    label.multi-select { display: block; cursor: pointer; } 
    label.checked { background-color: #ddd; } 
</style> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('input.hidden-checkbox').bind('change', function(e) { 
     var checkBox = $(e.target), 
      label = $('label[for=' + checkBox.attr('id') + ']'); 

     if(label) { 
     if(checkBox.attr('checked')) { 
      label.addClass('checked'); 
     } else { 
      label.removeClass('checked'); 
     } 
     } 
    }); 
    }); 
</script> 
</head> 
<body> 

<form> 
    <input type="checkbox" value="1" 
      name="paragraph[]" id="paragraph-1" 
      class="hidden-checkbox"/> 
    <label for="paragraph-1" class="multi-select">Text of paragraph 1. 
    As long as you want. Lorem ipsum dolor sit amet...</label> 

    <input type="checkbox" value="2" 
      name="paragraph[]" id="paragraph-2" 
      class="hidden-checkbox" class="multi-select" /> 
    <label for="paragraph-2" class="multi-select">Paragraph 2's text. 
    Lorem ipsum dolor sit amet...</label> 

    <!-- ...etc... --> 
</form> 
</body> 
</html>

출처

2009-11-24 03:51:26

+1 점진적 개선 용 :

여기 jQuery를 사용하여 원래 구현이다. JS 프레임 워크 없이도 쉽게 구현할 수 있습니다. – bobince

<select> 목록에 텍스트 줄 바꿈

답변

관련 문제