<select> cửa sổ không cập nhật sau khi thay đổi thuộc tính đã chọn trong <option>

Biểu mẫu đăng ký tôi đang tạo có tùy chọn Kinh doanh và Khu dân cư trong menu thả xuống được chọn.<select> cửa sổ không cập nhật sau khi thay đổi thuộc tính đã chọn trong <option>

Dựa trên loại trang hiện hoạt, tôi thay đổi tùy chọn được chọn mặc định.

Dưới đây là html:

<select class="type_c" name="type_c"> // default selected is business 
    <option value="Business" selected="selected">Business</option> 
    <option value="Residential">Residential</option> 
</select>

Dưới đây là đoạn code tôi chạy trong chân của mỗi trang để thay đổi những giá trị:

$(function(){ 

    var pageType = getPageType(); // returns either 'Business' or 'Residential' 

    $('.type_c option').each(function(){ 
     $(this).removeAttr('selected'); 
    }); 

    $('.type_c option').each(function(){ 
     if($(this).html() == pageType) 
      $(this).attr('selected','selected') 
    }); 

});

Vấn đề là khi nó trên một trang 'cư' , tùy chọn 'Khu dân cư' được chọn trong DOM nhưng trực quan, tùy chọn 'Doanh nghiệp' được chọn!

Cảm ơn.

Nguồn

2012-05-18 MonOve

Thực hiện chỉnh sửa để lưu ý rằng điều này chỉ xảy ra trong Firefox. Tôi đã nghĩ rằng nó luôn luôn xảy ra. –

Sine điều này đang thay đổi thuộc tính sau giá trị ban đầu, về mặt kỹ thuật là thuộc tính và bạn nên sử dụng $(this).prop() thay vì $(this).attr().

Ngoài ra, hãy thử đặt giá trị cho true thay vì selected

$(this).prop('selected',true);

Ngoài ra, bạn cũng có thể thiết lập giá trị của select yếu tố:

$('.type_c').val(pageType);

Nguồn

2012-05-18 17:40:19

sau khi tôi thực hiện đề xuất của bạn, html cho thấy không có lựa chọn – MonOve

Có thể là phiên bản JQuery. Tôi quên khi họ thêm '.prop()' –

Đối với phiên bản cao hơn jQuery, chúng ta cần prop() thay vì attr()! Nắm bắt tốt. –

tôi sẽ xác minh những gì bạn đang quay trở lại đang đánh giá chính xác. Tôi đã tạo một trang HTML trống với mã sau đây. Bạn có thể thấy rằng tùy chọn đã chọn được hiển thị khác nhau tùy thuộc vào bất kỳ chuỗi nào bạn đã đặt "pageType".

<html> 

<head> 
<script type="text/javascript" src="json2.min.js"> </script> 
<script type="text/javascript" src="jquery-1.7.2.min.js"> </script> 
<script type="text/javascript" src="jquery.cookie.js"> </script> 
</head> 

<script> 
$(function(){ 

    var pageType = 'Residential'; // returns either 'Business' or 'Residential' 

    $('.type_c option').each(function(){ 
     $(this).removeAttr('selected'); 
    }); 

    $('.type_c option').each(function(){ 
     if($(this).html() == pageType) 
      $(this).attr('selected','selected') 
    }); 

}); 

</script> 

<body> 

<select class="type_c" name="type_c"> // default selected is business 
    <option value="Business" selected="selected">Business</option> 
    <option value="Residential">Residential</option> 
</select> 



</body> 
</html>

Nguồn

2012-05-18 17:50:18 wrec

Tôi đã xác nhận rằng tôi có kết quả chính xác.Như tôi đã đề cập, vấn đề này chỉ với Firefox, nó hiển thị hoàn hảo trong các trình duyệt khác. – MonOve

Tôi đã có một cái gì đó như thế này xảy ra trước đây. Firefox thích lưu trạng thái của các phần tử biểu mẫu, vì vậy khi trang tải lại, nó sẽ hiển thị lựa chọn từ phiên cuối cùng, ngay cả khi nó được thay đổi qua JavaScript. Thông thường tôi phải tải trang từ đầu (tôi đi đến url và nhấn enter, như trái ngược với tải lại).

Tôi không chắc liệu điều đó có hữu ích hay không, nhưng điều đó đã xảy ra với tôi trong quá khứ.

(Tôi tạo ra một câu trả lời thứ hai vì đây là hoàn toàn khác nhau.)

Nguồn

2012-05-18 20:19:11

Nếu ai đó có cùng một vấn đề hơn tôi, tôi ralized rằng đó là phiên bản JQuery. Ví dụ này:

var SetValue = function(dropDownElement, valueToSet){ 
dropDownElement.after("<br> Set to: "+valueToSet); 
dropDownElement.find("option").removeAttr("selected"); 
unitsTypeControl.find("option").filter(function() { 
    return this.text === valueToSet; 
}).attr('selected', true); 
}

https://codepen.io/RolandoRetana/pen/GQrByQ

Hoạt động trên IE nhưng không phải trên Chrome, sau khi nâng cấp lên phiên bản mới nhất của jquery, nó làm việc trên cả hai.

Nguồn

2018-02-09 23:54:17

<select> cửa sổ không cập nhật sau khi thay đổi thuộc tính đã chọn trong <option>

Trả lời

Các vấn đề liên quan