選擇網頁表單元素具有特定屬性

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

您可以使用has attribute selector：

$('select[catid]'); 

然後遍歷返回使用.each()元素和日誌和屬性的值。

工作段：

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

<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>

Answer 2

我希望它應該是幫助你

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

這將是查詢字符串格式，您可以生成名稱和值映射在ajax方法中使用這個字符串作爲post方法的數據。

看到這個：https://jsfiddle.net/gredztox/

Answer 3

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

<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>

Answer 4

您可以使用filter()方法傳遞屬性選擇器作爲參數：

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

<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>

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