Question

这是一个愚蠢的问题，但我陷入困境。为什么我的第一个工作而不是另一个3.从阅读文档，所有4个应该完成工作。我想在一个更大的用例中获取一个表单的元素，在同一页面上可能有其他元素在其他表单或其他div中具有相同的名称，所以第四个选项是我真正想要的工作。但我无法弄清楚为什么所有这些都不起作用。

http://jsfiddle.net/7vF5z/1/

HTML：

 <form id="filter_form_id" name="filter_form" method="get" action="/retrieved_data_records">

 <select id="brand_id" name="brands">
 <option value="0"></option>
 <option value="143272526">Brand1</option>
 <option selected="selected" value="269998788">Brand2</option>
 <option value="330516076">Brand3</option>
 <option value="330516077">Brand4</option>

 </select>
</form>

JS：

 alert ("The val: " +  $('#brand_id').val() );    
 alert ("The val: " +  $('brands').val() );  
 alert ("The val: " +  $('#filter_form_id brands').val() );  
 alert ("The val: " +  $('#filter_form_id > brands').val() );

Answer 1

你从哪里获得这些选择器？

$('brands').val()正在寻找nodeName为brands（没有一个）的元素。要检查名称属性，请使用$('[name="brands"]').val()
$('#filter_form_id brands')正在寻找nodeName为brands（没有一个）的元素，这些元素是ID为filter_form_id的元素的后代（绝对不是其中之一）。
$('#filter_form_id => brands')完全无效。如果您想要所需的子选择器$('#filter_form_id > brands')

有关更完整的文档，请查看jQuery documentation以获取可用的选择器。

Answer 2

您的选择器使用brands，就好像它是元素名称一样。您需要使用[name="brands"]等属性选择器。

更新了测试用例：http://jsfiddle.net/7vF5z/3/

alert ("The val: " +  $('#brand_id').val() );    
alert ("The val: " +  $('[name="brands"]').val() );  
alert ("The val: " +  $('#filter_form_id [name="brands"]').val() );  
alert ("The val: " +  $('#filter_form_id > [name="brands"]').val() );

第四个选项是我真正想要的工作

如果那应该是一个子选择器，那么你需要通过以下方式纠正它：

使用正确的子选择器语法
使用属性选择器，如我的示例所示。

没有真正的理由在那里使用子选择器，除非您将在同一表单中使用具有相同name值的多个控件。

Answer 3

因为使用像brands这样的普通字符串，jQuery会查找具有该名称的标记。 brands不是标记。你可以做的是，$('select[name="brands"]').val()

Answer 4

// OK
alert ("The val: " +  $('#brand_id').val() );
// there is no tag <brands />
alert ("The val: " +  $('brands').val() );  
// there is still no tag <brands />
alert ("The val: " +  $('#filter_form_id brands').val() );
// KO, doesn't mean anything
alert ("The val: " +  $('#filter_form_id => brands').val() );

jquery获取子元素值

4 个答案: