0

次のコードがあります。

   <label for="ItemCountry">Country <span class="req">*</span></label>
    <select name="ItemCountry" id="ItemCountry" class="cat_dropdown" />
     <option value="AU" selected="selected">Australia</option>
     <option value="CA">Canada</option>
     <option value="CN">China</option>
     <option value="NZ">New Zealand</option>
     <option value="RU">Russia</option>
     <option value="US">United State</option>
   </select>
<script type="text/javascript">
$(function() {
$('#ItemCountry').change(function() {
var CountryVal = this.value; // value of the select element
$("#StateFeeder").html('<img src="/images/mapCountry/AU/ajax-loader.gif" class="IMG-Loading" />');
$('#StateFeeder').load('/StateFeeder/StateFeeder-Buy.html #StateFeeder-'+CountryVal);
})
})               
</script>

<div id="StateFeeder">
  <label for="ItemState">State / Province <span class="req">*</span></label>
  <select name="ItemState" id="ItemState" class="cat_dropdown">
    <option value="">-- Please select --</option>
    <option value="NSW">NSW</option>
    <option value="VIC">VIC</option>
    <option value="QLD">QLD</option>
    <option value="ACT">ACT</option>
    <option value="TAS">TAS</option>
    <option value="WA">WA</option>
    <option value="SA">SA</option>
    <option value="NT">NT</option>
  </select>e.g. NSW
</div>

<script type="text/javascript">
 $(function() {
     $('#ItemState').change(function() {
         var StateVal = this.value; // value of the select element
         $("#CityFeeder").html('<img src="/images/mapCountry/AU/ajax-loader.gif" class="IMG-Loading" />');
         $('#CityFeeder').load('/Country/'+CountryVal+'/_'+CountryVal+'_suburbs.html #Suburbs-'+StateVal, function(){
         $('#CityFeeder select').attr('size', '5');
         $('#CityFeeder select').change(function(){  this.form['CAT_Custom_221342'].value=$(this).val();
         }); });        
     })
  })               
</script>
    <div id="CityFeeder">
    <label for="ItemCity">City / Suburb <span class="req">*</span></label>
    <input type="text" name="ItemCity" id="ItemCity" class="cat_textbox" maxlength="255" style="text-transform: capitalize;" />e.g. Chatswood
    </div>

最後の部分が機能していません。状態選択の値を URL に渡して、その状態ブロックから保存された特定の都市のドロップダウンをリモート URL にロードすると想定されています。「CountryVal」がその URL に値を取り込んでいないようです。私がそれを修正するのを手伝ってください、どうもありがとう：

$('#CityFeeder').load('/Country/'+CountryVal+'/_'+CountryVal+'_suburbs.html #Suburbs-'+StateVal, function(){
    $('#CityFeeder select').attr('size', '5');
    $('#CityFeeder select').change(function(){
        this.form['CAT_Custom_221342'].value=$(this).val();
    }); 
});
4

1 に答える 1

1

$('#ItemState').change(function(){...}) を $('#StateFeeder').load("..") 内に移動して、最初のロードが終了したときに、change イベントを新しい dom 要素にバインドします。また、$(document).ready(function(){...}) の下の単一のタグ内にすべてのスクリプトを含めるようにしてください。

<label for="ItemCountry">Country <span class="req">*</span></label>
<select name="ItemCountry" id="ItemCountry" class="cat_dropdown" />
    <option value="AU" selected="selected">Australia</option>
    <option value="CA">Canada</option>
    <option value="CN">China</option>
    <option value="NZ">New Zealand</option>
    <option value="RU">Russia</option>
    <option value="US">United State</option>
</select>

<div id="StateFeeder">
    <label for="ItemState">State / Province <span class="req">*</span></label>
    <select name="ItemState" id="ItemState" class="cat_dropdown">
        <option value="">-- Please select --</option>
        <option value="NSW">NSW</option>
        <option value="VIC">VIC</option>
        <option value="QLD">QLD</option>
        <option value="ACT">ACT</option>
        <option value="TAS">TAS</option>
        <option value="WA">WA</option>
        <option value="SA">SA</option>
        <option value="NT">NT</option>
    </select>e.g. NSW
</div>

<div id="CityFeeder">
    <label for="ItemCity">City / Suburb <span class="req">*</span></label>
    <input type="text" name="ItemCity" id="ItemCity" class="cat_textbox" maxlength="255" style="text-transform: capitalize;" />e.g. Chatswood
</div>

<script type="text/javascript">
var CountryVal;
var StateVal;
$(document).ready(function(){
    $('#ItemCountry').change(function(){
        CountryVal = this.value; // value of the select element
        $("#StateFeeder").html('<img src="/images/mapCountry/AU/ajax-loader.gif" class="IMG-Loading" />');
        $('#StateFeeder').load('/StateFeeder/StateFeeder-Buy.html #StateFeeder-'+CountryVal, function(){
            $('#ItemState').change(function(){
                StateVal = this.value; // value of the select element
                $("#CityFeeder").html('<img src="/images/mapCountry/AU/ajax-loader.gif" class="IMG-Loading" />');
                $('#CityFeeder').load('/Country/'+CountryVal+'/_'+CountryVal+'_suburbs.html #Suburbs-'+StateVal, function(){
                    $('#CityFeeder select').attr('size', '5');
                    $('#CityFeeder select').change(function(){  
                        this.form['CAT_Custom_221342'].value=$(this).val();
                    }); 
                });        
            })
        });
    });
});           
</script>
于 2012-09-03T06:41:07.937 に答える