Javascript jQuery - 查找下一个选择元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7631219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Find next select element
提问by fulvio
What I am trying to do is populate data in a select element. I'm using the following code, where a user selects a SubjectCategory from one drop down, which then should populate the next select element's html. The handler itself is working just fine, it returns the correct html I need to place inside the select element.
我想要做的是在选择元素中填充数据。我正在使用以下代码，其中用户从一个下拉列表中选择一个 SubjectCategory，然后应该填充下一个选择元素的 html。处理程序本身工作得很好，它返回了我需要放置在 select 元素中的正确 html。
Also, keep in mind that I eventually clone both of these select elements and will need to populate them accordingly.
另外，请记住，我最终会克隆这两个选择元素，并且需要相应地填充它们。
The problem is that $elemis always returning null.
问题是$elem总是返回空值。
I'm guessing that it's a problem with this line of code, however not quite sure (keeping in mind that I'm also cloning these two select elements):
我猜这行代码有问题，但不太确定（请记住，我也在克隆这两个选择元素）：
var $elem = $this.closest('div').prev().find('select');
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>
回答by Digital Plane
You're searching inside the <label>, not the next <div>as you want. nextonly gets one element after the current one.
您正在 中搜索<label>，而不是<div>您想要的下一个。next只获取当前元素之后的一个元素。
Try this: It searches for the first div next to your parent element.
试试这个：它搜索你的父元素旁边的第一个 div。
var $elem = $this.closest('div').nextAll('div').first().find('select');
回答by RobG
Given that the source element has an id of ddlSubjectMatterand the target select element has an id of subjectMatter, it may be a lot simpler to capitalise the first letter of the second id (i.e. make SubjectMatter) then you get the second element by:
鉴于源元素的 id 为ddlSubjectMatter，而目标选择元素的 id 为subjectMatter，将第二个 id 的第一个字母大写（即创建SubjectMatter）可能要简单得多，然后您可以通过以下方式获得第二个元素：
var elem = document.getElementById(this.id.replace(/^ddl/,''));
It makes the element relationship independent of the document layout.
它使元素关系独立于文档布局。
Incidentally, it is invalid HTML to have select elements with no options, not that it is a big issue.
顺便说一句，没有选项的选择元素是无效的 HTML，这并不是一个大问题。
回答by Steven Zezulak
Why are you creating an extraneous $thisvariable? Unless you've omitted code that requires it for a different scope, just call $(this). That might be causing the problem, too.
你为什么要创建一个无关$this变量？除非您省略了需要它用于不同范围的代码，否则只需调用 $(this)。这也可能是导致问题的原因。
