2

ページにチェーンされたセレクトボックスのペアを作成しました。2 番目の選択ボックスには、最初のボックスで選択された値に応じて一連の値が入力されます。

2 つの選択ボックスをこのように機能させるスクリプトは、PHP と JavaScript を使用します。これは私が使用しているコードです:

形 

<select name="continent" tabindex="1" onChange="getCountry(this.value)">    
  <option value="#">-Select-</option>
  <option value="Europe">Europe</option>
  <option value="Asia">Asia</option>
</select>

<div id="countrydiv">
    <select name="country" tabindex="2">
        <option></option>
    </select> 
</div>

<input type="submit" />

</form>

JavaScript コード

$(document).ready(function() {
    $('select[name="continent"]').selectbox({debug: true});
    $('select[name="country"]').selectbox({debug: true});
});

function getXMLHTTP() { //function to return the xml http object
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }   
        return xmlhttp;
    }

function getCountry(continentId) {          
    var strURL="findCountry.php?continent="+continentId;
    var req = getXMLHTTP();

    if (req) {

        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('countrydiv').innerHTML=req.responseText;                       
                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }       
}

PHP コード (findCountry.php)

<? 
$continent=intval($_GET['continent']);
if ($_GET['continent'] == 'Europe') {
?>
<select name="country">
    <option value="France">France</option>
    <option value="Germany">Germany</option>
    <option value="Spain">Spain</option>
    <option value="Italy">Italy</option>
</select>
<? } 
if ($_GET['continent'] == 'Asia') {
?>
<select name="country">
    <option value="China">China</option>
    <option value="India">India</option>
    <option value="Japan">Japan</option>
</select>
<? } ?>

私がやりたいことは、これらの選択ボックスに jQuery 選択ボックス スタイルを適用することです。私はまだそれをすることに成功していません。問題は、jQuery が通常の選択ボックスを隠してリストに置き換えていることです。さらに、selectbox のコンテンツが更新された後、jquery はそれをリストに再構築できません。ここでjQueryコードを見ることができます

これらの技術を組み合わせるためにできることはありますか？私は何百万ものことを試しましたが、何もうまくいきませんでした。手伝ってくれませんか？

4

2 に答える 2

1

あなたはjQueryを使用していますよね？

だから、このjQueryのやり方をしましょう....

形

<select name="continent" tabindex="1" >    
  <option value="#">-Select-</option>
  <option value="Europe">Europe</option>
  <option value="Asia">Asia</option>
</select>

<div id="countrydiv">
    <select name="country" tabindex="2">
        <option></option>
    </select> 
</div>

jQuery

$(document).ready(function(){
    $('select[name="continent"]').change(function(){
         var continentId = this.value;
         $('select[name="country"]').load("findCountry.php?continent="+continentId)
    })
})

PHP コード (findCountry.php)

<? 
$continent=intval($_GET['continent']);
if ($_GET['continent'] == 'Europe') {
?>    
    <option value="France">France</option>
    <option value="Germany">Germany</option>
    <option value="Spain">Spain</option>
    <option value="Italy">Italy</option>

<? } 
if ($_GET['continent'] == 'Asia') {
?>    
    <option value="China">China</option>
    <option value="India">India</option>
    <option value="Japan">Japan</option>

<? } ?>
于 2010-05-12T06:48:36.957 に答える
0

ajax 呼び出しの最後に、selectbox() 呼び出しを再割り当てする必要があります。あなたが経験している問題は、ページの読み込み時に設定した DOM 要素が ajax 呼び出しの終わりまでになくなり、新しい選択ボックスに置き換えられることです。jQuery で $.ajax または $.get メソッドを使用すると、完了コールバックのオプションが提供されます。私はそれを使用します。

$(document).ready(function(){
    $('select[name="continent"]').change(function(){
         var continentId = this.value;
         $('select[name="country"]').parent().remove();
         $.ajax({url:"findCountry.php?continent="+continentId,success: function(data){ y = $('<select name="country"><select>');z=$('<div id="countrydiv"></div>'); $('input[type="submit"]').before(z.append(y.append(data))); $('select[name="country"]').selectbox(); }});
    })
})

編集：これは機能します。

于 2010-05-12T06:34:51.323 に答える