How to read value of an selected option and append it to another select box dynamically

Question

I have this Billing Address and Shipping Address form ,In it if i choose same as billing address, All values are copied to shipping Address ,I can copy value of text fields except but Select box, As im new to javascript ,i have not found a proper solution. My copy checkbox :

<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>

My Js Code :

    <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 box values are Dynamically updated from the database :

<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>

Values :

         <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>

When I console.log(billstate) i get 2 if i choose 2 ,Now how can i make id="shipstate" display value of the bill state in select. P.S :$("#shipstate").val(billstate); wont work .?

That should work with `.val(…)` already, see https://stackoverflow.com/a/16979926/10283047 (Do your options have the same values in both?) — misorude, Dec 05 '18 at 10:15
No it is not, you have only shown us a small excerpt of a form. We have no idea if you are even _reading_ the currently selected option of the first select field correctly, because we have not seen that field. — misorude, Dec 05 '18 at 10:28
yes i can read when i console.log i get the corresponding value of it — Amal Joseph, Dec 05 '18 at 10:29

score 0 · Answer 1 · answered Dec 05 '18 at 10:19

Try this code

 <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>

score 0 · Answer 2 · answered Dec 05 '18 at 21:58

I'm not really proficient in jQuery so I'll leave that part for you to code... What I am going to give you is a couple pointers of what you need:

You can dynamically change the value of a select field in two ways using JavaScript (or jQuery in your case)... I'll give you the example using pure js

Use the selectedIndex property.

If your options are always in the same order you could simply:

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

x being an integer starting from 0 for the first option to n-1 for the last option.

Force the value of the select field

This needs to be done carefully so you don't use a value that doesn't exist. But suppose you have:

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

You may do:

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

turning the above into jQuery should be trivial if you're proficient with jQ :)

The complete implementation of the above would be to take the original select field value and replicate it in the target one

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

fiddle with this a bit and see if you can get it to work

How to read value of an selected option and append it to another select box dynamically

2 Answers2