どのようにjqueryの要素を動的に切り替えることができますか？

Question

私がしたいのは、countysと都市を選択するためのダイナミックな小さなスクリプトを作ることです。さて、私はすべてのcountysとcitysをmysqlデータベースに持っています。 <select>タグで郡を選択すると、郡に関連する都市は次の<select>タグに表示されます。

だから、基本的には多分私はcountysためのオプションは、多分次のようになり

$(document).ready(function() { 
    $('.county').click(function(){ 
    $(this.name).toggle(); 
    }); 
}); 

ような何かを行うことができます：私はこれ以上をクリックすると

<option value="This County" name="This County" class="county">This County</option> 

、その後"This County"に接続されたすべての都市が表示されます。これにはちょっとした罰金が必要です。誰でも助けることができると思いますか？

Answer 1

すでにすべてがページ上にselectの形式である場合は、countyオプションの値を使用して、正しいselectを表示できます。

$("#counties").change(function(){ 
    $(".cities").hide(); 
    $("#" + this.value + "-cities").show(); 
}); 

そして、この作業の例：それは素晴らしいではありませんので、http://jsfiddle.net/jonathon/upaar/

しかし、私はこれに対してお勧めします。少量だけ必要な場合でも、あなたのページにはすべての都市があります。最良の選択肢は、あなたの郡リストに値を設定して、あなた自身のJSONと$.get()メソッドを使って都市にその都市を移入することです。

たとえば、ここではGeoNamesを使用しています。自分のデータで置き換えます。作業それの

$.get('http://ws.geonames.org/countryInfoJSON', function(data) { 
    $.each(data.geonames, function(i, item) { 
     $("#countries").append("<option value='" + item.geonameId + "'>" + item.countryName + "</option>"); 
    }); 
}); 

$("#countries").change(function() { 
    $("#cities").empty(); 

    $.get('http://ws.geonames.org/childrenJSON?geonameId=' + this.value, function(data) { 
     $.each(data.geonames, function(i, item) { 
      $("#cities").append("<option value='" + item.geonameId + "'>" + item.name + "</option>"); 
     }); 
    }); 
}); 

例：http://jsfiddle.net/jonathon/QkXAK/

上記負荷の国とはcountries選択の変更イベントを設定します。この値が変更されると、必要なデータとともにサーバーに送信されます。この場合、geonameIdが送信され、その国の子要素が検索されます。その後、citiesを選択してクリアし、AJAXリクエストで返された都市を追加します。

この利点は、ページの読み込み時にすべてのデータを送信する必要がなくなり、必要なものだけを読み込むことができることです。この例ではGeoNamesを使用していますが、独自のデータセットを持っている場合は基本原則は同じです。

Answer 2

あなたはしかし、あなたはあなたの街は、クラスまたはIDで中にある要素を選択する場合、あなたは2つのことを変更する必要があり、それを行うことができます：

1. クラスまたはIDセレクタを使用します。$（」。 '+ this.name）または$（'＃ '+ this.name）をそれぞれ使用します。
2. クラスまたはIDに空白が含まれていないことを確認してください。

編集：

たぶんのonchangeはこちらより適切であろう：

HTML：

<select id="counties"> 
    <option value="">Choose one...</option> 
    <option value="the-county">The county</option> 
    <option value="the-other-county">The other county</option> 
</select> 

<div class="city the-county">The city</div> 
<div class="city the-county">The second city</div> 
<div class="city the-other-county">The other city</div> 

のjavascript：

$(document).ready(function() { 
    var showCities = function(county) { 
     var $cities = $('.city'), 
      $countyCities = county ? $('.city.' + county) : [], 
      $otherCities = $cities.not($countyCities); 

     $otherCities.hide(); 
     $countyCities.show(); 
    } 

    $('#counties').change(function() { 
     showCities($(this).val()); 
    }); 

    // Don't show anything at page load. 
    showCities(null); 
}); 

Answer 3

非常にシンプルなクライアント側の実装は次のようになりこのようなもの：

$(document).ready(function() { 
    $('.county').change(function(){ 
     $.get('/cities', {whichCounty: $(this).val()}, function(html) { 
      $('#cities').html(html);   
     }); 
    }); 
}); 

上記あなたがwhichCountyパラメータを取り、サーバーのセットアップを持っていることを前提とし、かつ#cities容器に注入されたクライアントに完全に組み立てられた<select>バックを送信します。

もう1つの方法は、サーバーにJSONのキーと値のペア（CityId => CityNameなど）を送り返し、現在の選択肢のオプションをクリアし、新しい値をループし、オプションを動的に構築して追加する方法です「都市」へ<select>。

上記の例が後者（JSON）のアプローチよりも利点がある場合は、クライアント側で実装が容易です。