多个动态组合框javascript答案

【问题标题】：Multiple dynamic combobox javascript多个动态组合框javascript
【发布时间】：2012-11-22 11:04:36
【问题描述】：

是否有机会拥有一个组合框，每次我在其中选择某些内容时，它都会打开一个新的组合框，等等，直到没有更多数据可供选择？

（选项不能重复）

Combo1 - (opt1-opt2-opt3) - 选择 opt1
Combo2 - (opt2-opt3) - 选择 opt3
Combo3 - (opt2)

组合框应由使用 php 和 mysql 的查询填充。

我该怎么做？干杯！

【问题讨论】：

看看这个link
和另一个例子here
@NikosTsirakis，首先不要工作
尝试创建一个示例代码并在这里给我们您的尝试，如果它不起作用，我们可以进一步帮助您。

标签： php javascript mysql combobox

【解决方案1】：

这里有一些 jquery 可以做到这一点：

HTML

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

Javascript

$('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);
        }
    }
});

Demo

说明

// Adds an event listener to each combo box that is created dynmically
$('body').on('change', '.combo', function() {
    // Gets this selected value
    var selectedValue = $(this).val();

    // Checks if there are enough options left to create another combo box
    if (selectedValue !== '' && $(this).find('option').size() > 2) {
        // Clones the just selected combo box and get the current and next combo index
        var newComboBox = $(this).clone();
        var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
        var newComboBoxIndex = thisComboBoxIndex + 1;

        // Removes any "children" combo boxes
        $('.parentCombo' + thisComboBoxIndex).remove();

        // Checks if a blank value is not selected to create another combo box
        if (selectedValue !== '' && $(this).find('option').size() > 2) {
            // Gives this new combo box the correct id, index, parent class
            newComboBox.attr('data-index', newComboBoxIndex);
            newComboBox.attr('id', 'combo' + newComboBoxIndex);
            newComboBox.addClass('parentCombo' + thisComboBoxIndex);

            // Removes the selected option from the new combo box
            newComboBox.find('option[val="' + selectedValue + '"]').remove();

            // Adds the combo box to the page. Disco!
            $('body').append(newComboBox);
        }
    }
});

【讨论】：

@3dgoo，我看到了你的例子，但是当用户取消选择一个组合框时，它保持空白并且应该消失吧？
@user1148875 - 是的，你是对的。我错过了这个错误。我现在已经解决了这个问题并更新了代码。好接。谢谢。