Блог

Я создаю поле адреса формы. Я составил список городов в зависимости от состояния с помощью Ajax. Когда я устанавливаю флажок, значение соответствующего адреса не отображается в постоянном адресе. Может быть, но я борюсь с этим. пожалуйста, проверьте мой код и сообщите мне его ответ.

Код:-

 <div class="corrospond-address">
    <div class="form-group state">
        <div class="row">
            <span class="col-sm-4"> State* </span>
            <div class="col-sm-8">
                <select name="customer_state" class="form-control">
                    <option value="">choose state</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group city">
        <div class="row">
            <span class="col-sm-4"> City Name*</span>
            <div class="col-sm-8">
                <select name="customer_city" class="form-control">
                    <option value="">choose city</option>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="my-5">
    <input type="checkbox" class="p_address" name="">
    <h6 style="display: inline-block;">same paramanent address </h6>
</div>
<div class="permanent-address">
    <div class="form-group state">
        <div class="row">
            <span class="col-sm-4"> State* </span>
            <div class="col-sm-8">
                <select name="customer_permanent_state" class="form-control">
                    <option value="">choose state</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group city">
        <div class="row">
            <span class="col-sm-4"> City Name*</span>
            <div class="col-sm-8">
                <select name="customer_permanent_city" class="form-control">
                    <option value="">choose city</option> 
                </select>
            </div>
        </div>
    </div>
</div>
 

js-файл

 <script>

    $(document).ready(function(){
        $.ajax({
            url:"php/states.php",
            type:'post',
            dataType:'json',
            contentType:false,
            processData:false,
            success:function(data){
                $('.state select').append(data);
            },
            error:function(){
                console.log("ERROR IN AJAX");
            }
        });
    });

    $(document).on('change','.p_address',function(){
        if($(this).is(":checked")){
            let state = $('.corrospond-address .state select').val();
            let city = $('.corrospond-address .city select').val();

            $('.permanent-address .state select').val(state);
            $('.permanent-address .city select').val(city);
        }
    });
</script>
 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="corrospond-address">
    <div class="form-group state">
        <div class="row">
            <span class="col-sm-4"> State* </span>
            <div class="col-sm-8">
                <select name="customer_state" class="form-control">
                    <option value="Oklahama">Oklahama</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group city">
        <div class="row">
            <span class="col-sm-4"> City Name*</span>
            <div class="col-sm-8">
                <select name="customer_city" class="form-control">
                    <option value="">choose city</option>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="my-5">
    <input type="checkbox" class="p_address" name="">
    <h6 style="display: inline-block;">same paramanent address </h6>
</div>
<div class="permanent-address">
    <div class="form-group state">
        <div class="row">
            <span class="col-sm-4"> State* </span>
            <div class="col-sm-8">
                <select name="customer_permanent_state" class="form-control">
                    <option value="">choose state</option>
                    <option value="Oklahama">Oklahama</option>

                </select>
            </div>
        </div>
    </div>
    <div class="form-group city">
        <div class="row">
            <span class="col-sm-4"> City Name*</span>
            <div class="col-sm-8">
                <select name="customer_permanent_city" class="form-control">
                    <option value="">choose city</option> 
                </select>
            </div>
        </div>
    </div>
</div>



<script>
    $(document).on('change','.p_address',function(){
        if($(this).is(":checked")){
            let state = $('.corrospond-address .state select').val();
            let city = $('.corrospond-address .city select').val();

            $('.permanent-address .state select').val(state);
            $('.permanent-address .city select').val(city);
        }
    });
</script>
 

Проверьте это редактирование, оно работает. Но самое главное при тестировании этого кода в вашем браузере посмотрите, какое значение отображается и откуда взято это значение.

         <select name="customer_state" class="form-control">
            <option value="Oklahama">Oklahama</option>
        </select>
 

Как вы можете видеть, ТЕПЕРЬ он фактически имеет значение Oklahama
Раньше это было так:

     <select name="customer_state" class="form-control">
        <option value="">Oklahama</option>
    </select>