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
});
It might not be very elegant but this is what I needed:
var sel= ($(this).closest('div')).children('select').attr('id');