Question

我有一个下拉框和两个输入字段。当我单击下拉框并选择下拉选项时，下拉框中的文本将更改为我单击的选择的文本。

我还有一个函数可以创建另一行，它与下面提到的下拉框和两个输入字段相同，但是当创建了这一行时，下拉框文本不会改变。

我完全不知道为什么第二个（或第三个，第四个......）下拉框不会改变其文本。我看着改变它的创建方式，以包含一个迭代的名称，并改变函数以获取生成的菜单的名称，但很快就变得很麻烦。任何帮助，将不胜感激。

字段的HTML（生成新字段的函数工作正常，只是再次吐出下面的HTML）

<div class="row">
            <div class="form-group">

                <div class="col-lg-2">
                    <div class="dropdown">
                        <button onclick="drop_down_selection()" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><span id="dropdown_title"> Payment type </span><span class="caret"></span></button>
                        <ul class="dropdown-menu" id="dropdown-menu">
                            <li><a>Progress payment</a></li>
                            <li><a>legal fees</a></li>
                            <li><a>Loss Adjustor fees</a></li>
                        </ul>
                    </div>
                </div>
            </div>

                <div class="col-lg-3">
                    <input type="text" class="form-control"
                        name="paymentNote" placeholder="Enter source of data"  />
                </div>

                <div class="col-lg-3" id="figureamount">
                    <input type="number" step="0.01" class="form-control" 
                        name="paymentAmount" placeholder="Amount"  />
                </div>

            </div><br>

单击时更改下拉菜单文本的功能

    $('#dropdown-menu li').click( function(e) {
        $('#dropdown_title').html($(this).find('a').html());
    });

任何帮助都会很棒。

修改

我查看了答案Event binding on dynamically created elements?

这实际上并没有帮助（更多的是与我怀疑的缺乏理解有关）

我已将Html更改为

            <div class="form-group">
            <div id="paymentFigureFields">
                <div class="row">

                    <div class="col-lg-2">
                        <div class="dropdown">
                            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><span id="dropdown_title"> Payment type </span><span class="caret"></span></button>
                            <ul class="dropdown-menu" id="dropdown-menu">
                                <li><a>Progress payment</a></li>
                                <li><a>legal fees</a></li>
                                <li><a>Loss Adjustor fees</a></li>
                            </ul>
                        </div>
                    </div>


                    <div class="col-lg-3">
                        <input type="text" class="form-control"
                            name="paymentNote" placeholder="Enter source of data"  />
                    </div>

                    <div class="col-lg-3" id="figureamount">
                        <input type="number" step="0.01" class="form-control" 
                            name="paymentAmount" placeholder="Amount"  />
                    </div>
                </div>
            </div>
        </div>

我已将更改为文本的功能更改为

    <script type="text/javascript">

    $("#paymentFigureFields").on('click', 'li', function(){

        $("#dropdown_title").html($(this).find('a').html());

    });
</script>

现在当我生成新的下拉框时，第一个按预期工作（我点击下拉菜单＆gt;选择我的选项＆gt;下拉菜单的文字更改为我选择的内容）

但是当创建一个新的下拉框时，我点击下拉框＆gt;点击我想要的选项＆gt;然后第一个下拉框的文本发生变化。

你有什么建议吗？

再次感谢您的帮助。

修改2

这是使用下拉框生成字段的代码，该框应在单击选项时更改其文本。

        function add_payment_figure_fields() {

            var objTo = document.getElementById("paymentFigureFields");
            var divtest = document.createElement("div");
            divtest.innerHTML = '<div class="row"><div class="col-lg-2"><div class="dropdown"><button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><span id="dropdown_title"> Payment type </span><span class="caret"></span></button><ul class="dropdown-menu" id="dropdown-menu"><li><a>Progress payment</a></li><li><a>legal fees</a></li><li><a>Loss Adjustor fees</a></li></ul></div></div><div class="col-lg-3"><input type="text" class="form-control" name="paymentNote" placeholder="Enter source of data"  /></div><div class="col-lg-3" id="figureamount"><input type="number" step="0.01" class="form-control" name="paymentAmount" placeholder="Amount"  /></div></div><br>';
            objTo.appendChild(divtest)

    }

为什么不添加脚本下拉框将框中的文本更新为所选的选择

0 个答案: