时间戳

首页 > 解决方案 > 每次动态输入Jquery的增加按钮时如何从选择框中给出值

javascript - 每次动态输入Jquery的增加按钮时如何从选择框中给出值

问题描述

我在我的表单中使用 jQuery 动态表输入。每当我选择国家时，我都会从选择框中获取值。但是当我增加动态按钮 (+) 并再次从另一个输入字段的选择框中选择国家时。我得到相同的值来自第一个选择框字段的国家/地区

<table class="dynamic-fields-table">
     <thead>
            <tr>
                <th >Country</th>
                <th >City</th>
                 <th></th>
            </tr>
    </thead>
    <tbody data-role="dynamic-fields">
        <tr class="form-inline">
         <td>
             <select name="country[]" class="form-control">
                <option value="1">USA</option>  
                <option value="2">Russia</option>
                <option value="3">Japan</option>
             </select>
         </td>
        <td>
        <input type="text" name="city[]" class="form-control">
        </td>
        <td>
            button  data-role="add">Add</button>-  // button for increasing or decreasing input
        </td>
        </tr>
    </tbody>

</table>

在脚本文件中。当我首先选择国家时，它会在控制台中出现正确的值。但是当我增加输入表单然后我再次选择另一个国家时，国家的值将与第一次选择的相同。那么我应该如何给出国家的值我选择了每次我增加动态输入按钮

$(document).on(
        'click',
        '[data-role="dynamic-fields"],
        function(e) {
            e.preventDefault();
            var container = $(this).closest('[data-role="dynamic-fields"]');
            new_field_group = container.children().filter('.form-inline:first-              child').clone();
            new_field_group.find('input').each(function(){
                $(this).val('');
            });
            container.append(new_field_group);
            updatecity()
       }
    );
$(document).on('change', " select[name='country[]']", function(){
        updatecity();
  });

function updatecity(){
    $country = $(" select[name='country[]']").val();
    console.log($country)
}

标签： javascriptjquery

解决方案

目前，updatecity始终为您提供 的第一个结果的值$(" select[name='country[]']")。而其他下拉列表的值被忽略。

function updatecity(){
    $country = $("select[name='country[]']").val();
    console.log($country)
}

要使每个下拉列表的调用根据updatecity其自身的值进行操作，您可以添加一个参数updatecity来告知要更新哪个国家/地区。

function updatecity($target){
    $country = $target.val();
    console.log($country);
}

更改函数签名后，您还需要更新调用位置updatecity

$(document).on(
    'click',
    '[data-role="add"]',
    function(e) {
        // ...
        updatecity($("select[name='country[]']"))
    });

$(document).on('change', "select[name='country[]']", function(e){
   updatecity($(this));
});

此外，您显示的代码将在<tbody>单击时插入一个新的内联表单，因此我将选择器从更改[data-role="dynamic-fields"]为[data-role="add"]

作为旁注，我注意到updatecity除了记录一个值之外实际上并没有做任何事情。您可能希望其行为与其名称匹配。

下面我附上了一个代码片段进行演示。

$(document).on(
        'click',
        '[data-role="add"]',
        function(e) {
            e.preventDefault();
            var container = $(this).closest('[data-role="dynamic-fields"]');
            new_field_group = container.children().filter('.form-inline:first-child').clone();
            new_field_group.find('input').each(function(){
                $(this).val('');
            });
            container.append(new_field_group);
            updatecity($("select[name='country[]']"))
       }
    );
$(document).on('change', "select[name='country[]']", function(e){
    updatecity($(this));
  });

function updatecity($target){
    $country = $target.val();
    console.log($country)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="dynamic-fields-table">
     <thead>
            <tr>
                <th >Country</th>
                <th >City</th>
                 <th></th>
            </tr>
    </thead>
    <tbody data-role="dynamic-fields">
        <tr class="form-inline">
         <td>
             <select name="country[]" class="form-control">
                <option value="1">USA</option>  
                <option value="2">Russia</option>
                <option value="3">Japan</option>
             </select>
         </td>
        <td>
        <input type="text" name="city[]" class="form-control">
        </td>
        <td>
            <button  data-role="add">Add</button><!-- button for increasing or decreasing input-->
        </td>
        </tr>
    </tbody>

</table>

推荐阅读