How to add dynamically a combobox using jQuery

Question

I\'ve this working code which is creating one combobox:

You can see it working here: jsfiddle

$(\'body\').on(\'chan         


        

Answer 1

I'm not entirely sure if your intent, but it seems like you want to have groups of two select elements and then adding a new group when the user selects a value.

In that case I suggest grouping your two selects in a fieldset like this:

  
    
    Opt1
    Opt2
    Opt3
  
  
    
    Opt1
    Opt2
    Opt3
  

​ And then looking up that parent fieldset and cloning it like this:

$('body').on('change', '.combo', function() {
  var selectedValue = $(this).val();

  var fieldset = $(this).parents('fieldset');

  if ($(this).find('option').size() > 2) {
    var newFieldset = fieldset.clone();
    var newComboBox = $(fieldset).children('.combo:first');
    var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
    var newComboBoxIndex = thisComboBoxIndex + 1;

    $('.parentCombo' + thisComboBoxIndex).remove();

    if (selectedValue !== '') {
        newComboBox.attr('data-index', newComboBoxIndex);
        newComboBox.attr('id', 'combo' + newComboBoxIndex);
        newComboBox.addClass('parentCombo' + thisComboBoxIndex);
        newComboBox.find('option[val="' + selectedValue + '"]').remove();
        $('body').append(newFieldset);
    }
  }     
});​

There are some details probably not exactly the way you need it, but in general this is the approach I'd recomment.

Find the updated Fiddle here: http://jsfiddle.net/JaVVe/8/