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（即make SubjectMatter ）然后你得到第二个元素：

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

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

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

Answer 3

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

jQuery - 查找下一个选择元素

3 个答案: