Question

我有以下HTML表单：

<form name="catForm">
   <select name="group">
     <option value="1">Group 1</option> 
     <option value="2">Group 2</option> 
   </select>
   <select name="catid[1]" catid="1">
     <option value="1">1</option> 
     <option value="2">2</option> 
   </select>
   <select name="catid[3]" catid="3">
     <option value="1">1</option> 
     <option value="2">2</option> 
   </select>
</form>

如何从我的表单中选择使用（JavaScript或jQuery）所有SELECT（仅限具有catid属性的人）并显示其catid属性值和所选选项值？

Answer 1

您可以使用filter()方法将属性选择器作为参数传递：

＆＃13;

var cat = [];
$('select').filter('[name^="catid"]').each(function() {
  cat.push($(this).attr('name'));
});
alert(cat);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name="catForm">
   <select name="group">
     <option value="1">Group 1</option> 
     <option value="2">Group 2</option> 
   </select>
   <select name="catid[1]" catid="1">
     <option value="1">1</option> 
     <option value="2">2</option> 
   </select>
   <select name="catid[3]" catid="3">
     <option value="1">1</option> 
     <option value="2">2</option> 
   </select>
</form>

＆＃13;

Answer 2

您可以使用 has attribute selector ：

$('select[catid]');

然后使用.each()迭代返回的元素并记录值和属性。

工作代码段

＆＃13;

$('select[catid]').each(function(){
  console.log($(this).attr("catid"));
  console.log($(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name="catForm">
   <select name="group">
     <option value="1">Group 1</option> 
     <option value="2">Group 2</option> 
   </select>
   <select name="catid[1]" catid="1">
     <option value="1">1</option> 
     <option value="2">2</option> 
   </select>
   <select name="catid[3]" catid="3">
     <option value="1">1</option> 
     <option value="2">2</option> 
   </select>
</form>

＆＃13;

Answer 3

＆＃13;

$('select[name^=catid]').each(function() {
  console.log($(this).attr("catid")); // get attribute using this
  console.log($(this).val()); // get selected value using this
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="catForm">
   <select name="group">
     <option value="1">Group 1</option> 
     <option value="2">Group 2</option> 
   </select>
   <select name="catid[1]" catid="1">
     <option value="1" selected>1</option> 
     <option value="2">2</option> 
   </select>
   <select name="catid[3]" catid="3">
     <option value="1">1</option> 
     <option value="2" selected>2</option> 
   </select>
</form>

＆＃13;

Answer 4

我希望它对你有帮助

var categories= $('[catid]').serialize();
console.log(categories);

这将以querystring格式生成名称和值映射，您可以在ajax方法中将此字符串用作post方法的数据。

请参阅：https://jsfiddle.net/gredztox/

Answer 5

您可以使用select[name^="catid"]方法选择具有名称的多个数组元素。

<script>
$(document).on('change','select',function(){
  var catArr = [];
  $('select[name^="catid"]').each(function() {
    catArr.push($(this).val());
  });
  document.getElementById('result').innerHTML = catArr;
});
</script>

你的最终Output

选择具有特定属性的Web表单元素

5 个答案: