javascript - How to get multiselect optgroup values based on each label on submit? - Stack Overflow

admin管理员组

文章数量:1291083

I have a select option with multiple optgroups. I want to select multiple values from each group & get values based on the label(of optgroup) on submiting it.

HTML code is

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

And on submit

$("#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());
    });


}); 

If two options from 1st & 2nd optgroups are selected, I am getting the label & id , but the value are getting as blank.

Output:

label=Unit Category
id=unit
value=
label=Unit Category
id=unit
value=
label=Industry Types
id=types
value=
label=Industry Types
id=types
value=

I have a select option with multiple optgroups. I want to select multiple values from each group & get values based on the label(of optgroup) on submiting it.

HTML code is

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

And on submit

$("#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());
    });


}); 

If two options from 1st & 2nd optgroups are selected, I am getting the label & id , but the value are getting as blank.

Output:

label=Unit Category
id=unit
value=
label=Unit Category
id=unit
value=
label=Industry Types
id=types
value=
label=Industry Types
id=types
value=

• javascript
• jquery
• html
• multi-select
• optgroup

Share Improve this question Follow edited Jan 14, 2017 at 6:05 Adithya asked Jan 14, 2017 at 5:57 AdithyaAdithya 1,85744 gold badges2121 silver badges4040 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Actually, you already have access to the values of those selected options, but you are actually trying to get a value from the optgroup and not from the option since you used the optgroup's #id to determine its value, that's why you always get a blank result for the value.

See a working code below:

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

The value (text value) is just the text content of this.

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

If you want the real value (corresponding numbers) use this:

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

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

本文标签： javascriptHow to get multiselect optgroup values based on each label on submitStack Overflow