Lấy giá trị của một hộp SELECT trong Internet Explorer

Question

Tôi có một hộp chọn:

<select id="item1" name="Item 1"> 
    <option> </option> 
    <option> Camera </option> 
    <option> Microphone </option> 
    <option> Tripod </option> 
</select> 

Và tôi có JavaScript này:

var item1= document.getElementById("item1").value; 

item1 luôn thấy trống rỗng, không bao giờ là lựa chọn được chọn. Tuy nhiên, điều này hoạt động trong firefox.

Answer 1

Sử dụng item.value hoạt động cho tất cả các trình duyệt ngoại trừ các trình duyệt rất cũ (Netscape 4 bất kỳ ai?). Lý do nó không hoạt động trong trường hợp này là vì bạn không có thuộc tính value trong các tùy chọn. Bạn nên khai báo giá trị cho mỗi thuộc tính. Những gì bạn hiện có chỉ là "văn bản" tài sản, mà thông thường mặc định để giá trị bất cứ khi nào không có giá trị được khai báo. Cách khác, bạn có thể đẩy một số mã trong sự kiện tải cửa sổ để làm cho "giá trị" của mỗi tùy chọn này giống như "văn bản".

Một cách thứ ba bạn có thể sử dụng mã dưới đây, mà là cách old-fashioned:

var s = document.getElementById('item1'); 
var item1 = s.options[s.selectedIndex].value; 

Answer 2

Là một phụ lục để trả lời # 1, cẩn thận như < chọn> .selectedIndex có thể -1 số thời gian sẽ ném một ngoại lệ khi được chuyển vào < chọn> .options [n]. Như vậy, bạn có thể muốn làm làm một thử nghiệm nhanh:

var s = document.getElementById('item1'); 
var item = (-1 != s.selectedIndex)? 
       s.options[s.selectedIndex] : null; 

EDIT

bình luận

mỗi Tim, s.selectedIndex thể là -1 nếu bạn thiết lập nó qua JavaScript hoặc bạn tạo ra một sản phẩm nào < chọn > hộp.

Answer 3

Vì thẻ tùy chọn của bạn không có thuộc tính "giá trị" IE6 và IE7 sẽ trả lại cho bạn chuỗi trống. Bạn nên đọc giá trị từ "văn bản" lĩnh vực của đối tượng lựa chọn như thế này:

var item1 = s.options[s.selectedIndex].text; 

trong item1 bạn sẽ có giá trị mà bạn cần mà không cần phá vỡ khả năng tương thích với Firefox và IE 8.

Answer 4

Mã để nhận được một vaiable ColumnName từ hộp CHỌN gọi layerDetails.styleColumn (SELECT thẻ có cùng tên và Id), mà làm việc trên tất cả các trình duyệt ...

var columnName = document.getElementsByName('layerDetails.styleColumn')[0].value; 
if (columnName == null || columnName == '') 
    { 
    columnName = document.getElementById('layerDetails.styleColumn').value; 
    } 

if (columnName == null || columnName == '') 
    { 
    var select = document.getElementById('layerDetails.styleColumn'); 
    columnName= select.options[select.selectedIndex].value; 
    if (columnName == null || columnName == '') 
    { 
    columnName= select.options[select.selectedIndex].text; 
    } 
    }