Question

I have a drop down menu. Has product types. Product types have associated value (from drop down) values correspond to machine groups.

So each option should have three variables–Machine name, values, machine group.

I can get the Machine name and I can get the machine value (and display them in a different field)…what I have not been able to figure out is how to change the value into the Machine group.

jQuery('#MachineName').bind('change', function()
    {

      //get selected value from drop down;
        var selectedValue = jQuery("#MachineName").val();

      //populate a text field with the selected drop down value
        jQuery("#MachineValue").val(selectedValue);

What I would like to do is keep that MachineValue but then populate another text field with the sorted MachineGroup

I have been trying to run it through something like

    switch(jQuery(this).val()){
    case "236" : newVal = "8";
    break;

But I don’t want to “change” the value I just want to do an “if then” type filter, so maybe something like:

    '236' => "8", '237' => "5",

I just don’t know how to properly say “assign the MachineGroup based on the MachineValue” (and then have it populate a different text field)

In the end I would have three fields. The drop down, the MachineValue and the MachineGroup. Drop down and value are done, I just need to do Group. (And I can sort Group based on MachineName…just not sure which would be easier)

Answer 1

The simplest at client side is to have server add some extra data- attributes to the markup. jQuery.data() makes it very easy to retrieve these.

html:

<option value="5" data-group="foo" data-name="Bar">Bar</option>

JS:

$('select').change(function(){
    var $sel=$(this).find('option:selected');
    var machineGroup=$sel.data('group');
    var machineName=$sel.data('name');
    var value= $sel.val()// or $(this).val();
});

API ( read down below first series of examples, feature wasn’t in original API)

http://api.jquery.com/data/