Блог

Главная - Вопросы по программированию - Как давать значение из поля выбора при каждом увеличении кнопки динамически вводимого Jquery

Как давать значение из поля выбора при каждом увеличении кнопки динамически вводимого Jquery

#javascript #jquery

#javascript #jquery ( 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)
}

Комментарии:

1. Доступного кода недостаточно, чтобы воспроизвести или понять, что вам нужно. Можете ли вы добавить больше кода для кнопок и — и их действий?

2. @VidiyaPrasanth Это действительно необходимо?

3. или попробуйте создать исполняемый фрагмент кода в stack overflow. Если я не могу понять, что не так, запустив код, помочь мне будет нелегко.

4. @VidiyaPrasanth Я обновил свой вопрос. пожалуйста, посмотрите

Ответ №1:

В настоящее время 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>