0

How could it get box_B optgroup's label name based on box_A option that is selected?

I use following function tried to alert box_A parent label but unable to get it, if I changed to var label = $(e).attr('value');, the option value is show.

function showLabel(e){ 
    if($(e).attr('checked')=='checked'){
         var label = $(e).parent().attr('label');
         alert(label);
    }
}

select box:

<select id="box_A" multiple="multiple">
    <optgroup label="Asia: Japan">
        <option value="1 - Toyota">1 - Toyota</option>
        <option value="2 - Honda">2 - Honda</option>
    </optgroup>
    <optgroup label="Europe: German">
        <option value="3 - Mercedes">3 - Mercedes</option>
    </optgroup>
</select>

<select id="box_B" multiple="multiple">
    <optgroup label="1 - Toyota">
        <option value="1A - Camry">1A - Camry</option>
        <option value="1B - Yaris">1B - Yaris</option>
    </optgroup>
    <optgroup label="2 - Honda">
        <option value="2A - Civic">2A - Civic</option>
    </optgroup>
    <optgroup label="3 - Mercedes">
        <option value="3A - SL320">3A - SL320</option>
    </optgroup>

</select>

call the function:

$(document).ready(function() {

    $("#box_A").multiSelect({}, showLabel);

}

thanks.

conmen
  • 2,377
  • 18
  • 68
  • 98
  • 1
    Where is `showLabel` being called, and what are you passing as the `e` argument? Also, you are missing the end tag for the `optgroup` element. – Zhihao Mar 25 '13 at 03:25
  • 1
    for option there is not attribute `checked` instead use `selected` or selectedIndexof. – Dipesh Parmar Mar 25 '13 at 03:29
  • sorry, I missed to include call function, pls see my edited post. – conmen Mar 25 '13 at 03:37
  • @Dipesh Parmar, I use jquery-multiselect plugin to randered a checkbox for each options, so `checked` is working. – conmen Mar 25 '13 at 03:45
  • @conmen Could you please link the to multiselect plugin you are using in your question? This is important to know when answering the question so we understand how/when `showLabel` is being called, how the plugin works, and what arguments `showLabel` receives. – Zhihao Mar 25 '13 at 03:52
  • @Zhihao, here is jq-multiselect plugin: http://ytjobwebsite.googlecode.com/svn-history/r780/trunk/job/webapp/js/plugin/multiselect/jquery.multiSelect.js – conmen Mar 25 '13 at 03:58

1 Answers1

0

Assuming showLabel is called and is passed a jQuery event object when an option is clicked, you could use this:

function showLabel(e){ 
    var $target = $(e.target);
    if($target.is(':selected')){
         var label = $target.closest('optgroup').attr('label');
         alert(label);
    }
}

Edit:

After taking a looking at the plugin you posted, it looks like my assumptions above were wrong. showLabel is not being passed a jQuery event, but is instead passed the jQuery object for the clicked item, which is also a checkbox and not an option. Try using this instead:

function showLabel($target){ 
    if($target.is(':checked')){
         var label = $target.closest('optgroup').attr('label');
         alert(label);
    }
}
Zhihao
  • 14,758
  • 2
  • 26
  • 36
  • @conmen I've updated my answer based on the plugin link you posted. What I was hoping for when asking for a link though was to see any available documentation for the plugin rather than the actual code for it. – Zhihao Mar 25 '13 at 04:23
  • this time the alert poped with value `undefined` – conmen Mar 25 '13 at 04:29
  • @conmen Sorry about the late response. It seems that the passed argument, `$target` is not an `optgroup` or a child of one. This may be because the plugin is inserting markup outside of your `select` elements. Do you have an example of this plugin in action or provide a demo on [jsFiddle](http://jsfiddle.net/) so that I can inspect the markup structure? You can also do this yourself through your browser's developer tools. It is difficult to help you at this point without a working sample or any documentation. – Zhihao Apr 04 '13 at 07:07