jQuery - Tìm phần tử chọn tiếp theo

Question

Điều tôi đang cố gắng làm là điền dữ liệu vào phần tử chọn. Tôi đang sử dụng mã sau đây, trong đó người dùng chọn một SubjectCategory từ một trình đơn thả xuống, sau đó sẽ điền vào phần tử html của phần tử tiếp theo. Trình xử lý tự hoạt động tốt, nó trả về html đúng mà tôi cần đặt bên trong phần tử select.

Ngoài ra, hãy nhớ rằng cuối cùng tôi sao chép cả hai yếu tố được chọn này và sẽ cần phải điền chúng tương ứng.

Vấn đề là $elem luôn trả về giá trị rỗng.

Tôi đoán rằng đó là một vấn đề với dòng mã này, tuy nhiên không phải khá chắc chắn (giữ trong tâm trí rằng tôi cũng đang nhân bản hai chọn phần tử):

var $elem = $this.closest('div').prev().find('select');

$(".SubjectCategory").live("click", function() { 
    var $this = $(this); 
    var $elem = $this.closest('div').next().find('select'); 
    var a = $this.val(); 

    $.get("/userControls/BookSubjectHandler.ashx?category=" + a, {}, function (data) { 
     $elem.html(data); 
    }); 
}); 

<div class="singleField subjectField"> 
    <label id="Category" class="fieldSml">Subject Matter</label> 
    <div class="bookDetails ddl"><select id="ddlSubjectMatter" class="fieldSml SubjectCategory"></select></div> 

    <label id="Subjects" class="fieldSml">Category</label> 
    <div class="bookDetails ddl" id="subjectMatter"><select id="ddlSubjects" class="fieldSml Subjects"></select></div> 
</div> 

Answer 1

Bạn đang tìm kiếm bên trong <label>, không phải là <div> tiếp theo mà bạn muốn. next chỉ nhận được một phần tử sau phần tử hiện tại.

Hãy thử cách này: Nó tìm kiếm div đầu tiên bên cạnh phần tử gốc của bạn.

var $elem = $this.closest('div').nextAll('div').first().find('select'); 

Answer 2

Tại sao bạn tạo một biến số $this không liên quan? Trừ khi bạn đã bỏ qua mã yêu cầu nó cho một phạm vi khác, chỉ cần gọi $ (this). Điều đó có thể gây ra vấn đề.

Answer 3

Cho rằng các yếu tố nguồn có id của ddlSubjectMatter và chọn phần tử target có một id của subjectMatter, nó có thể đơn giản hơn rất nhiều để tận dụng các chữ cái đầu tiên của id thứ hai (tức là làm SubjectMatter) sau đó bạn sẽ có được yếu tố thứ hai bởi:

var elem = document.getElementById(this.id.replace(/^ddl/,'')); 

Nó làm cho mối quan hệ yếu tố không phụ thuộc vào cách bố trí tài liệu.

Ngẫu nhiên, HTML không hợp lệ để có các phần tử chọn không có tùy chọn, không phải là vấn đề lớn.