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

Question

У меня есть эта форма адреса выставления счета и адреса доставки. В ней, если я выбираю то же, что и адрес выставления счета, все значения копируются в адрес доставки, я могу скопировать значение текстовых полей, кроме поля «Выбрать», поскольку я новичок в javascript, яне нашли правильного решения.Флажок My copy:

<div class="form-group">
 <label class="checkbox-inline shipping-address">
<input type="checkbox" id="copybtn" name="same" > Shipping address same as billing address
             </label>
           </div>

Мой код Js:

    <script>

      $("#copybtn").on("change", function(){
    if (this.checked) {
  var billadd = $("#billaddress").val();
  var fname = $("#bill_first_name").val();
  var lname = $("#bill_last_name").val();
  var billadd2  = $("#billaddress2").val();
  var billstate = $("#billstate").val();

  console.log(billstate);
  $("#shipaddress").val(billadd);
  $("#ship_first_name").val(fname);
  $("#ship_last_name").val(lname);
  $("#shipaddress2").val(billadd2);
  $("#shipstate").val(billstate);
}else{
     $("#shipaddress").val("");
     $("#ship_first_name").val("");
     $("#ship_last_name").val("");
     $("#shipaddress2").val("");
     $("#shipstate").val("");
}
 });

    </script>

Значения поля My Select динамически обновляются из базы данных:

<div class="form-group">
              <label class="control-label">State</label>
              <select class="form-control select2" name="hw_sales[state]"  id="shipstate" data-validation="required" data-validation-error-msg="state is required" onchange="get_city(this.value)">
                          <option value="">Select State</option>
                                                    <?php
                   foreach ($state as $st) {
                                                        ?>
             <option value="<?php echo $st->state_id; ?>" <?php echo (!empty($sales) && $sales->state == $st->state_id) ? 'selected' : ''; ?>><?php echo ucfirst(mb_strtolower($st->state_name)); ?></option>
                                                    <?php } ?>
                                                </select>
                                                <input  type="hidden" name="base_url" id="base_url" value="<?php echo base_url(); ?>"/>
                                            </div>

Значения:

         <option value="1">Andaman &amp; nicobar islands</option>


    <option value="2">Andhra pradesh</option>


<option value="3">Arunachal pradesh</option>

  <option value="4">Assam</option>

   <option value="5">Bihar</option>

   <option value="6">Chandigarh</option>

  <option value="7">Chattisgarh</option>

 <option value="8">Dadra &amp; nagar haveli</option>

  <option value="9">Daman &amp; diu</option>

    <option value="10">Delhi</option>

  <option value="11">Goa</option>

  <option value="12">Gujarat</option>

 <option value="13">Haryana</option>

 <option value="14">Himachal pradesh</option>

Когда я console.log (billstate) я получаю 2, если я выбираю 2, теперь, как я могу сделать id = "shipstate" отображаемое значение состояния счета в select.PS: $ ("# shipstate"). Val (billstate);не будет работать.?

Answer 1

Я не очень опытный в jQuery, поэтому я оставлю эту часть для вас, чтобы кодировать ... Что я собираюсь дать вам пару указателей на то, что вам нужно:

Вы можете динамическиизменить значение поля select двумя способами, используя JavaScript (или jQuery в вашем случае) ... Я приведу пример с использованием чистого js

1. Используйте свойство selectedIndex.

Если ваши параметры всегда в одном и том же порядке, вы можете просто:

var target = document.getElementById("id_of_select_field");
target.selectedIndex = x

x - целое число, начинающееся с 0 для первого параметра до n-1 для последнего варианта.

Принудительная установка значения в поле выбора.

Это необходимо сделать осторожно, чтобы не использовать значение, которое не существует.Но предположим, что у вас есть:

<select id="my_select">
    <option value="one">BLAH</option>
    <option value="two">WHATEVER</option>
</select>

Вы можете сделать:

var target = document.getElementById("my_select");
target.value = "one"; // this selects BLAH

превращение вышеупомянутого в jQuery должно быть тривиальным, если вы опытны с jQ:)

Полная реализация вышеизложенного состояла бы в том, чтобы взять исходное значение поля select и скопировать его в целевую

var original = document.getElementById("original_select_id").value;
var target = document.getElementById("target_select_id");
target.value = original;

, немного поиграть с этим и посмотреть, сможете ли вы заставить его работать

Answer 2

Попробуйте этот код

 <form>
  <fieldset>
    <legend>Billing</legend>
    <input type="text" name="first_name" />
    <input type="text" name="last_name" />
    <input type="text" name="billing_address_1" />
    <input type="text" name="billing_address_2" />
    <input type="text" name="billing_city" />
    <input type="text" name="billing_state" />
    <input type="text" name="billing_zip" />
    <select name="billing_country">
      <option value="...">...</option>
    </select>
  </fieldset>
  <fieldset>
    <legend>Shipping</legend>
    <label><input type="checkbox" id="same_as_billing" /> Same as billing</label>
    <input type="text" name="shipping_first_name" />
    <input type="text" name="shipping_last_name" />
    <input type="text" name="shipping_address_1" />
    <input type="text" name="shipping_address_2" />
    <input type="text" name="shipping_city" />
    <input type="text" name="shipping_state" />
    <input type="text" name="shipping_zip" />
    <select name="shipping_country">
      <option value="...">...</option>
    </select>
  </fieldset>
</form>
<script>
$(document).ready(function() {
  $("#same_as_billing").on("change", function(){
    if (this.checked) {
      $("[name='shipping_first_name']").val($("[name='first_name']").val());
      $("[name='shipping_last_name']").val($("[name='last_name']").val());
      $("[name='shipping_address_1']").val($("[name='billing_address_1']").val());
      $("[name='shipping_address_2']").val($("[name='billing_address_2']").val());
      $("[name='shipping_city']").val($("[name='billing_city']").val());
      $("[name='shipping_state']").val($("[name='billing_state']").val());
      $("[name='shipping_zip']").val($("[name='billing_zip']").val());
      $("[name='shipping_country']").val($("[name='billing_country']").val());
    }
  });  
});
</script>