CODEWITHSUNDEEP
javascriptjquerycombobox
noneJavaScript
noneJavaScript

Reputation: 845

How to add dynamically a combobox using jQuery

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

You can see it working here: jsfiddle

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

    if ($(this).find('option').size() > 2) {
        var newComboBox = $(this).clone();
        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(newComboBox);
        }
    }
});

Which is resulting something this, everytime I fill a combobox, the next one is opened.

one combobox only

How can I change that code to have this? Which means two comboboxes opening (please forget the style)

Which means two comboboxes effect

Thank you.

Upvotes: 3

Views: 5698

Answers (2)

Frank van Puffelen
Frank van Puffelen

Reputation: 598668

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:

<fieldset>
  <select id="combo1" class="combo" data-index="1">
    <option></option>
    <option val="Opt1">Opt1</option>
    <option val="Opt2">Opt2</option>
    <option val="Opt3">Opt3</option>
  </select>
  <select id="combo2" class="combo" data-index="2">
    <option></option>
    <option val="Opt1">Opt1</option>
    <option val="Opt2">Opt2</option>
    <option val="Opt3">Opt3</option>
  </select>
</fieldset>

​ 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/

Upvotes: 2

Benjamin Schmidt
Benjamin Schmidt

Reputation: 1061

If you just want to double the amount of combo boxes you could use a for-loop and set their values depending on the value of the counter-variable.

Upvotes: 1

Related Questions