我有一个包含多个选项组的选择选项。 我想从每个组中选择多个值并在提交时根据(optgroup 的)标签获取值。
HTML代码为
<table> <tr> <td>Select</td> <td> <select multiple="multiple" id="multiGrpSel" "> <optgroup label="Indutry Types" id="types"> <option value="1">Private</option> <option value="2">Public</option> <option value="3">Govt</option> </optgroup> <optgroup label="Unit Category" id="unit"> <option value="1">Micro</option> <option value="2">Small</option> <option value="3">Medium</option> </optgroup> </select> </td> </tr> <tr><th align="center"> <input type="button" id="submit" class="button" value="Submit"> </th></tr> </table>
然后在提交
$("#submit").die('click').live('click',function() {
$('#multiGrpSel').find("option:selected").each(function(){
//optgroup label
console.debug('label='+$(this).parent().attr("label"));
//optgroup id
console.debug('id='+$(this).parent().attr("id"));
// values based on each group ??
id = $(this).parent().attr("id");
console.debug('value='+$('#'+id).val());
});
});
如果选择了第一个和第二个 optgroups 中的两个选项,我将得到 label 和 id ,但值变为空白。
输出:
label=Unit Category
id=unit
value=
label=Unit Category
id=unit
value=
label=Industry Types
id=types
value=
label=Industry Types
id=types
value=
最佳答案
实际上,您已经可以访问这些选定选项的值,但您实际上是在尝试从 optgroup
而不是 option
中获取值,因为您使用了optgroup 的#id
来确定它的值,这就是为什么您总是得到该值的空白结果。
查看下面的工作代码:
$("#submit").click(function (){
$('#multiGrpSel').find("option:selected").each(function(){
//optgroup label
var label = $(this).parent().attr("label");
//optgroup id
console.log('id='+$(this).parent().attr("id"));
// values based on each group ??
id = $(this).parent().attr("id");
// gets the value
console.log("label: "+label+" value: "+$(this).val())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="multiGrpSel">
<optgroup label="Indutry Types" id="types">
<option value="1">Private</option>
<option value="2">Public</option>
<option value="3">Govt</option>
</optgroup>
<optgroup label="Unit Category" id="unit">
<option value="1">Micro</option>
<option value="2">Small</option>
<option value="3">Medium</option>
</optgroup>
</select>
<input type="button" id="submit" value="submit"/>
关于javascript - 如何根据提交时的每个标签获取多选 optgroup 值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41647249/