Combobox με τίτλο

Σε διάφορα site στο internet θα έχετε δει να έχουν ένα combobox(<select...>) που να έχει τίτλους και κατηγορίες σαν το παρακάτω:



Πώς μπορεί όμως αλήθεια να γίνει αυτό;
Μία λύση είναι να ελέγξουμε αν υπάρχει multiline ιδιότητα στα combobox. Αυτό όμως δεν υπάρχει. Ούτε μπορεί να γίνει γράφοντας πχ "Τίτλος 1<br/>--------" σαν περιεχόμενο του <option...>.

Τι κάνουμε λοιπόν; Θα χρησιμοποιήσουμε τις ιδιότητες SELECTED και DISABLED του <select...> και συγκεκριμένα το παρακάτω κώδικα:

<select>
<option DISABLED SELECTED style="color:#000;">Τίτλος 1</option>
<option DISABLED>----------</option>
<option>Επιλογή 1</option>
<option>Επιλογή 2</option>
<option>Επιλογή 3</option>
<option DISABLED>----------</option>
<option DISABLED style="color:#000;">Τίτλος 2</option>
<option DISABLED>----------</option>
<option>Επιλογή 1</option>
<option>Επιλογή 2</option>
<option>Επιλογή 3</option>
<option DISABLED>----------</option>
<option DISABLED style="color:#000;">Τίτλος 3</option>
<option DISABLED>----------</option>
<option>Επιλογή 1</option>
<option>Επιλογή 2</option>
<option>Επιλογή 3</option>
</select>


Με αυτόν τον τρόπο, οι επιλογές "Τίτλος 1","Τίτλος 2" και "Τίτλος 3" δεν μπορούν να επιλεχθούν, όπως το ίδιο συμβαίνει και με τις παύλες "--------". Αν όμως, το "Τίτλος 1" είναι DISABLED, δε μπορεί να εμφανίζεται ως προεπιλεγμένο. Αυτό το "πρόβλημα"(αν αποτελεί πρόβλημα) διορθώνεται ορίζοντας το συγκεκριμένο *<option> ως DISABLED αλλά και SELECTED. Τέλος, εφόσον το DISABLED αλλάζει το χρώμα της επιλογής σε γκρίζο, σε περίπτωση που αυτό μας ενοχλεί, μπορούμε απλώς να ορίσουμε την ιδιότητα style στο συγκεκριμένο option ώστε να ορίσουμε το χρώμα των γραμμάτων σε αυτό που εμείς επιθυμούμε.

Comments

Popular Posts