Hướng dẫn input combobox html

Question

Hướng dẫn làm html combobox

1. Mở đầu:
Combobox là thế này

Nó làm 1 select list các item, người dùng có quyền nhập 1 item mới không có trong danh sách
2. Phân tích:
Để làm combobox thì chúng ta cần 1 cái textbox + 1 cái select.
Khi chọn 1 option bên select thì giá trị của nó phải được update vào textbox.
Đặt vị trí của textbox sao cho cái select và textbox trùng nhau để tạo hiệu ứng combobox
3. Thực hiện
3.1 Phần HTML

Code:

    <html>
            <head>
                    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
            </head>
            <body>
                    <form name="form1" id="form1" action="/?" method="POST">
                            <label for="select1">Select item</label>
                            <select name="select1" id="select1" class="combobox">
                                    <option value="1">Item 1</option>
                                    <option value="2">Item 2</option>
                                    <option value="3">Item 3</option>
                                    <option value="4">Item 4</option>
                                    <option value="5">Item 5</option>
                            </select>
                    </form>
            </body>
    </html>

3.2 Phần javascript

Code:

    //Goi function nay khi document.ready
    jQuery(function(){
            (function($){ //
                    $('select[class^=combobox]').each(function(){ //chay ham nay voi tat ca select box co class="combobox"
                           
                            var id = 'txt_' + this.id; //tao 1 id cho textbox
                            while($(id).size()) //kiem tra tinh duy nhat cua id
                                    id += 'a';
                            //tao html cua 1 textbox
                            var html = '<input type="text" name="' + this.name + '" class="combobox-textbox" id="' + id + '" />';
                            $(this).parent().append(html); //them 1 textbox vào form
                            $('#' + id).val($('option[value=' + this.value + ']').html()); //set value hien tai vao html
                            $(this).change(function(){ //khi select 1 option
                                    $('#' + id).val($('option[value=' + this.value + ']').html()); //set innerHTML cua option vao textbox
                            });
                            //dat vi tri cua textbox
                            $('#' + id).css('position', 'absolute'); //set position
                            $('#' + id).offset($(this).offset()); //copy offset
                            $('#' + id).height($(this).height()); //set height
                            $('#' + id).width($(this).width() - $(this).height()); //set width
                            $('#' + id).css('border', 'none'); //special style for firefox
                            $('#' + id).css('margin-top', '1px');
                            $('#' + id).css('margin-left', '1px');
                    });
            })(jQuery);
    });

4. Thêm
Bạn có thể cung cấp thêm một số style để combobox được linh hoạt hơn.
Những style này có thể thêm bằng js (để tiện sử dụng trên nhiều website) hoặc bằng css(cụ thể trên từng website) để đẹp và đúng hơn.From: Blueway Developer Zone

Dùng để tạo danh sách xổ xuống cho phép người dùng lựa chọn

Cú pháp:

<select name = "name">

[<optgroup label = "label">]

<option [selected] value = "value">Text</option>

.......

[</optgroup>]

<option [selected] value = "value">Text</option>

.......

</select>

Ví dụ: Tạo trang web có combobox

<select name="browser">

    <optgroup label="Firefox">
      <option value="2.0 or higher">
        Firefox 2.0 or higher
      </option>
      <option value="1.5.x">Firefox 1.5.x</option>
      <option value="1.0.x">Firefox 1.0.x</option>
    </optgroup>

    <optgroup label="Microsoft Internet Explorer">
      <option value="7.0 or higher">
        Microsoft Internet Explorer 7.0 or higher
      </option>
      <option value="6.x">Microsoft Internet Explorer 6.x</option>
      <option value="5.x">Microsoft Internet Explorer 5.x</option>
      <option value="4.x">Microsoft Internet Explorer 4.x</option>
    </optgroup>

    <optgroup label="Opera">
      <option value="9.0 or higher">Opera 9.0 or higher</option>
      <option value="8.x">Opera 8.x</option>
      <option value="7.x">Opera 7.x</option>
    </optgroup>

    <option>Safari</option>
    <option>Other</option>

</select>

Xem ví dụ

programming html Input combobox HTML Combobox HTML CSS Listbox trong HTML