jquery 如何在提交时根据每个标签获取多选选项组值？

t1rydlwq 于 2023-10-17 发布在 jQuery

关注(0)|答案(3)|浏览(121)

我有一个选择选项与多个optgroups。我想从每个组中选择多个值，并根据提交时的标签（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());
    });

});

如果选择了第一和第二选项组中的两个选项，我将获得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=

jquery

来源：https://stackoverflow.com/questions/41647249/how-to-get-multiselect-optgroup-values-based-on-each-label-on-submit

3条答案

按热度按时间

14ifxucb1#

实际上，您已经可以访问这些选定选项的值，但您实际上是试图从optgroup而不是从option获取值，因为您使用optgroup's #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="Industry 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"/>

赞(0）回复(0）举报 2023-10-17

gstyhher2#

值（文本值）只是this的文本内容。

console.debug('value=' + $(this).text());

如果你想得到真实的值（对应的数字），使用这个：

console.debug('value=' + $(this).val());

赞(0）回复(0）举报 2023-10-17

bn31dyow3#

$("#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"/>

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 如何在提交时根据每个标签获取多选选项组值？

3条答案

相关问题

热门标签

最新问答