Question

我有此帐单邮寄地址和收货地址表格，如果我选择与帐单邮寄地址相同的格式，则所有值都将复制到收货地址，我可以复制文本字段的值，但“选择”框除外，这是javascript新功能，尚未找到适当的解决方案。我的副本复选框：

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

“我的选择”框的值是从数据库动态更新的：

<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中显示票据状态的值。 P.S：$（“＃shipstate”）。val（billstate）;不会工作。？

Answer 1

尝试此代码

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

Answer 2

我不是真的很精通jQuery，所以我将把这一部分留给您编写代码...我要给您的是一些您需要的指针：

您可以使用JavaScript（或jQuery）以两种方式动态更改选择字段的值...我将使用纯js给出示例

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

如果您精通jQ，将上述内容转换为jQuery应该很简单：）

以上内容的完整实现是获取原始的select字段值并将其复制到目标字段中

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

稍微摆弄一下，看看能否使它工作

如何读取所选选项的值并将其动态添加到另一个选择框

2 个答案: