jQuery - 查找下一个选择元素

Question

我想要做的是在select元素中填充数据。 我正在使用以下代码，用户从一个下拉列表中选择一个SubjectCategory，然后填充下一个select元素的html。 处理程序本身工作得很好，它返回我需要放在select元素中的正确html。

另外，请记住，我最终克隆了这两个选择元素，并需要相应地填充它们。

问题是$elem总是返回null。

我猜这是这行代码的问题，但不太确定（请记住我也克隆了这两个选择元素）：

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

您正在<label>内搜索，而不是在下一个<div>中搜索。 next只在当前元素之后获得一个元素。

试试这个：它搜索你父元素旁边的第一个div。

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

Answer 2

假设源元素的id为ddlSubjectMatter ，而目标select元素的id为subjectMatter ，则将第二个id的第一个字母大写（即创建SubjectMatter ）可能要简单得多，然后通过以下方式得到第二个元素：

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

它使元素关系独立于文档布局。

顺便提一下，选择没有选项的元素是无效的HTML，而不是一个大问题。

Answer 3

你为什么要创建一个无关的$this变量？ 除非你省略了要求它用于不同范围的代码，否则只需调用$（this）。 这也可能导致问题。