Hiển thị cấu trúc phân cấp của "TÙY CHỌN" trong thẻ "CHỌN"

Question

Sự cố của tôi liên quan đến HTML và CSS. Tôi có một cấu trúc kiểu phân cấp mà tôi muốn hiển thị bên trong một danh sách. Hệ thống phân cấp chứa Quốc gia, Tiểu bang và Thành phố (có ba cấp độ sâu).

Tôi muốn hiển thị danh sách bên trong danh sách chọn, mỗi loại mục (Quốc gia, Tiểu bang, Thành phố) phải được chọn. Các mục sẽ xuất hiện thụt vào dưới dạng:

United States 
- Hawaii 
-- Kauai 
- Washington 
-- Seattle 
-- Chelan 

Vấn đề là với sự thụt đầu dòng. Tôi đang cố gắng sử dụng hoặc lề trái hoặc padding-trái để thụt lề các thẻ, xuất hiện chính xác trong FireFox nhưng không phải trong IE7. Đây là ví dụ về danh sách được chọn đã tạo:

<select name="Something"> 
<option style="padding-left: 0">United States</option> 
<option style="padding-left: 20px">Hawaii</option> 
<option style="padding-left: 40px">Kauai</option> 
<option style="padding-left: 20px">Washington</option> 
<option style="padding-left: 40px">Seattle</option> 
<option style="padding-left: 40px">Chelan</option> 
</select> 

Tôi muốn đạt được sự thụt lề nhất quán trên các trình duyệt mà không cần sử dụng CSS hacks.

Answer 1

cách lừa dối tốt hơn nhiều và là ý tưởng đầu tiên của tôi. Để thay thế nếu điều đó không hiệu quả là bạn có thể sử dụng các khoảng trống trong giá trị thẻ:

<select> 
    <option>select me</option> 
    <option>&nbsp;me indented</option> 
    <option>&nbsp;&nbsp;even more indentation</option> 
</select> 

Nó đẹp, nhưng nó có thể hiệu quả nếu bạn không chọn nhóm.

Answer 2

Việc hiển thị các phần tử SELECT phần lớn phụ thuộc vào trình duyệt, bạn có rất ít ảnh hưởng đến bản trình bày của chúng. Một số trình duyệt rõ ràng cho phép bạn tùy biến nhiều hơn các trình duyệt khác, IE xảy ra để cho phép rất ít (gasp, những người muốn có thunk;)). Nếu bạn cần các phần tử SELECT rất tùy chỉnh, bạn sẽ cần phải sử dụng JavaScript hoặc tạo lại thứ gì đó hoạt động như một số SELECT nhưng được tạo thành từ một loạt các hộp kiểm và các hộp kiểm hoặc một số thứ cần mở rộng.

Có nói rằng, tôi nghĩ rằng những gì bạn đang tìm kiếm là OPTGROUPs:

<select> 
    <optgroup label="xxx"> 
    <option value="xxxx">xxxx</option> 
    .... 
    </optgroup> 
    <optgroup label="yyy"> 
    ... 
    </optgroup> 
</select> 

Mỗi trình duyệt sẽ hiển thị chúng khác nhau, nhưng họ sẽ được hiển thị trong một thời trang độc đáo trong cách này hay cách khác. Lưu ý rằng mặc dù chính thức trong HTML4 bạn không thể làm tổ OPTGROUP s.

Answer 3

Phương pháp này không phải là nhóm tạo ra nhiều vấn đề hơn là giải quyết vấn đề? Là người dùng, tôi nên chọn người nào trong số đó? Có lợi ích gì khi lựa chọn một thứ gì đó cụ thể hơn quốc gia?

Nếu vấn đề là bạn chỉ có một trường cơ sở dữ liệu để lưu trữ chúng, tại sao không có ba hộp chọn riêng biệt (tạo 2 hoặc 3 tùy chọn) và chỉ lưu trữ cụ thể nhất?:

<select name="country"> 
    <option>Choose a country</option> 
    <option>United States</option> 
</select> 
<select name="state"> 
    <option>Choose a state</option> 
    <option>Hawaii</option> 
</select> 
<select name="city"> 
    <option>Choose a city</option> 
    <option>Kauai</option> 
</select> 

Answer 4

Chỉ vì lợi ích của khách, tôi cảm thấy tôi nên chia sẻ giải pháp này tôi nghĩ ra: http://jsfiddle.net/n9qpN/

Trang trí các tùy chọn với lớp mức

<select name="hierarchiacal"> 
<option class="level_1">United States</option> 
    <option class="level_2">Hawaii</option> 
     <option class="level_3">Kauai</option> 
    <option class="level_2">Washington</option> 
     <option class="level_3">Seattle</option> 
     <option class="level_3">Chelan</option> 
</select> 

Bây giờ chúng ta có thể sử dụng jQuery để định dạng lại nội dung của phần tử select

$(document).ready(
function(){ 
    $('.level_2').each(
     function(){ 
      $(this).text('----'+$(this).text()); 
     } 
    ); 

    $('.level_3').each(
     function(){ 
      $(this).text('---------'+$(this).text()); 
     } 
    ); 

} 
); 

Điều này có thể được mở rộng đến bất kỳ cấp độ nào

Answer 5

Hãy thử sử dụng & # 160;

<select name="Something"> 
 
    <option>United States</option> 
 
    <option>&#160;Hawaii</option> 
 
    <option>&#160;&#160;Kauai</option> 
 
    <option>&#160;Washington</option> 
 
    <option>&#160;&#160;Seattle</option> 
 
    <option>&#160;&#160;Chelan</option> 
 
</select>

Answer 6

tôi đã có thể thực hiện điều này bằng cách sử dụng NO-BREAK nhân vật SPACE unicode. http://www.fileformat.info/info/unicode/char/00a0/index.htm

Sao chép-dán nhân vật từ trang đó vào mã và thì đấy: (.   không làm việc cho tôi vì tôi đã sử dụng một thư viện cho các hộp chọn ưa thích mà sẽ bơm chúng đúng nguyên văn) https://jsfiddle.net/fwillerup/r9ch988h/