Question

title seems clear enough, but we never know.

here’s my problem, i got a serie of checkbox, each one is associated to a list of choices.

ie:
Checkbox1

=> Opt1

=> Opt2

Checkbox2

=> Opt1

=> Opt2

etc.., (with about a dozen options per checkbox)

what i need to do is:

when user check a box, a prompt appear with a Select inside and the result is send as the value of the checkbox.

i’ve tryed some plugins (ie:jQuery Impromptu) but they all auto-close my select tag wich output something like that

<select></select><option></option><option></option>

anyone got a solution?

Answer 1

HTML

<input type="checkbox" id="chk1"><select style="display: none;" id="sel1"><option>.........</select>
<input type="checkbox" id="chk2"><select style="display: none;" id="sel2"><option>.........</select>
<input type="checkbox" id="chk3"><select style="display: none;" id="sel3"><option>.........</select>

JS

$(document).ready(function()
{
   $('input[type="checkbox"').click(function()
  {
    if($(this).checked)
    {
      $('#sel'+$(this).attr('id').toString().replace('chk', '')).show();
    }
    else
     $('#sel'+$(this).attr('id').toString().replace('chk', '')).hide();
  });
  $('select').change(function(){
     $('#chk' + $(this).attr('id').toString().replace('sel', '')).val($(this).val());
  });
});

I hope this helps.