Search code examples
jqueryhtmljqtransform

Get id from select with jqTransform (with more than one select in the form)


I have a form with 3 selects and have applied jqTransform to it.

<div class="selects">
<form id="form" class="form_comer" method="post" action="ajax/selects.php">
     <select id="select-local" name="select-local" class="select-index">
    <option selected="selected" value="">'.$select_comer_tipo.'</option>
    <option value="1">'.$select_comer_rest.'</option>
    <option value="2">'.$select_comer_bar.'</option>
    <option value="3">'.$select_comer_cafe.'</option>
     </select>
         <select id="select-ambiente" name="select-ambiente" class="select-index">
    <option value="">'.$select_comer_ambiente.'</option>
    <option value="1">'.$select_comer_animado.'</option>
    <option value="2">'.$select_comer_silencioso.'</option>
    <option value="3">'.$select_comer_glamouroso.'</option>
    </select>
        <select id="select-precio" name="select-precio" class="select-index">
    <option value="">'.$select_comer_precio.'</option>
    <option value="1">'.$select_comer_p1.'</option>
    <option value="2">'.$select_comer_p2.'</option>
    <option value="3">'.$select_comer_p3.'</option> 
    </select>                       
</form>
</div>

I have a function that works when I click on any of the 3 selects. I want it to pass to the ajax function both the value selected and the id of the select I chose. My "sel" variable is what isn't working here, it only gets the id of the first select of them all.

$(".form_comer div.jqTransformSelectWrapper ul li a").click(function(){
    var sel= $("select.jqTransformHidden").attr('id');

    var index= $(this).attr('index');
    var value = $('select.jqTransformHidden option:eq('+index+')').attr('value');

        $.ajax({
            type: "POST",
            url: $("#form").attr("action"),
            data: "value=" + value + "&sel=" + sel,
            dataType: 'html',
            success: function(msg) {
                alert(msg);
            }

        });        

    return false; //prevent default browser action
});

Solution

  • It might not be very elegant but this is what I needed:

    var sel= ($(this).closest('div')).children('select').attr('id');