我有一个页面，我有州，城市，拉链的这些级联下拉列表，用于商家地址，他们工作得很好。现在我想找出一种方法，如果用户说，有一个复选框 与商业相同，然后将价值从企业复制到办公室。现在的问题在于办公地址的城市和拉链下拉是根据状态动态创建的，选择它永远不会复制选择。
我怎样才能让它发挥作用？
<script>
$(document).ready(function(){
$("select#b_state").change(function(){
var b_state = $("select#b_state option:selected").attr('value');
//alert(state);
$("#b_city").html( "" );
$("#b_zip").html( "" );
if (b_state.length > 0 ) {
//alert(state.length);
$.ajax({
type: "POST",
url: "fetch_b_city.php",
data: "b_state="+b_state,
cache: false,
beforeSend: function () {
$('#b_city').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#b_city").html( html );
}
});
}
});
$(document).on("change", "select#b_city",(function(){
var b_city = $("select#b_city option:selected").attr('value');
// alert(state_id);
if (b_city.length > 0 ) {
$.ajax({
type: "POST",
url: "fetch_b_zip.php",
data: "b_city="+b_city,
cache: false,
beforeSend: function () {
$('#b_zip').html('<img src="../images/loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#b_zip").html( html );
}
});
} else {
$("#b_zip").html( "" );
}
}));
$("select#o_state").change(function(){
var o_state = $("select#o_state option:selected").attr('value');
//alert(state);
$("#o_city").html( "" );
$("#o_zip").html( "" );
if (o_state.length > 0 ) {
//alert(state.length);
$.ajax({
type: "POST",
url: "fetch_o_city.php",
data: "o_state="+o_state,
cache: false,
beforeSend: function () {
$('#o_city').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#o_city").html( html );
}
});
}
});
$(document).on("change", "select#o_city",(function(){
var o_city = $("select#o_city option:selected").attr('value');
// alert(state_id);
if (o_city.length > 0 ) {
$.ajax({
type: "POST",
url: "fetch_o_zip.php",
data: "o_city="+o_city,
cache: false,
beforeSend: function () {
$('#o_zip').html('<img src="../images/loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#o_zip").html( html );
}
});
} else {
$("#o_zip").html( "" );
}
}));
$('input[name=oi]').click(function() {
//alert('Using the same address');
if ($("input[name=oi]:checked").is(':checked')) {
// Get value from business text boxes
var b_address1 = $("#b_address1").val();
var b_address2 = $("#b_address2").val();
var b_state = $('select[name=b_state] option:selected').val();
var b_city = $('select[name=b_city] option:selected').val();
var b_zip = $('select[name=b_zip] option:selected').val();
// Assign values to office text boxes
$("#o_address1").val(b_address1);
$("#o_address2").val(b_address2);
$('select[name=o_state] option[value=' + b_state + ']').attr('selected','selected');
$('select[name=o_city] option[value=' + b_city + ']').attr('selected','selected');
$('select[name=o_zip] option[value=' + b_zip + ']').attr('selected','selected');
}else{
$("#o_address1").val();
$("#o_address2").val();
$('select[name=o_state] option[value=please choose]').attr('selected','selected');
$('select[name=o_city] option[value=please choose]').attr('selected','selected');
$('select[name=o_zip] option[value=please choose]').attr('selected','selected');
};
});
});
</script>
<fieldset style="width:600px;">
<legend>Bussiness Information</legend>
<p></p>
<p>
<label for="mf">Address: </label>
<input class="mf" name="b_address1" id="b_address1" type="text"/>
<!-- <span class="validate_success">A positive message!</span> -->
</p>
<p>
<label for="mf">Address 2: </label>
<input class="mf" name="b_address2" id="b_address2" type="text"/>
<!-- <span class="validate_error">A negative message!</span> -->
</p>
<p>
<?php
$sql = "SELECT DISTINCT state FROM tbl_zip ORDER BY state ASC";
$query = mysqli_query($con, $sql);
?>
<label>State:
<select name="b_state" id = "b_state">
<option value="">Please Select</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC )) { ?>
<option value="<?php echo $rs["state"]; ?>"><?php echo $rs["state"]; ?></option>
<?php } ?>
</select>
</label>
</p>
<p id="b_city">
</p>
<p id="b_zip">
</p>
</fieldset>
<fieldset style="width:600px;">
<legend>Office Information</legend>
<p>
Same As Business Information: <input type="checkbox" name="oi" id="oi" onclick="sameas();" />
</p>
<p></p>
<p>
<label for="mf">Address: </label>
<input class="mf" name="o_address1" id="o_address1" type="text"/>
<!-- <span class="validate_success">A positive message!</span> -->
</p>
<p>
<label for="mf">Address 2: </label>
<input class="mf" name="o_address2" id="o_address2" type="text"/>
<!-- <span class="validate_error">A negative message!</span> -->
</p>
<p id="o_state">
<?php
$sql = "SELECT DISTINCT state FROM tbl_zip ORDER BY state ASC";
$query = mysqli_query($con, $sql);
?>
<label>State:
<select name="o_state" id = "o_state">
<option value="">Please Select</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC )) { ?>
<option value="<?php echo $rs["state"]; ?>"><?php echo $rs["state"]; ?></option>
<?php } ?>
</select>
</label>
</p>
<p>
<label>City:
<select name="o_city" id="o_city">
<option value="">Please Select</option>
</select>
</label>
</p>
<p id="o_zip">
</p>
<p>
<input class="button" type="submit" value="Submit" />
<input class="button" type="reset" value="Reset" />
</p>
</fieldset>
答案 0 :(得分：1)
最简单的方法是在设置选择之前从上面的下拉列表中复制html：
$("#o_zip").html($("#b_zip").html() );
$('select[name=o_zip] option[value=' + b_zip + ']').attr('selected','selected');