Применить стиль jquery selectbox к цепочке selectbox - PullRequest
Новая
       38

Применить стиль jquery selectbox к цепочке selectbox

2 голосов
/ 12 мая 2010

Я создал пару цепочек выбора на моей странице. Второй блок выбора заполняется набором значений в зависимости от выбранного значения первого блока.

Скрипт, который заставляет работать два окна выбора, использует 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 здесь

Что я могу сделать, чтобы объединить эти техники? Я пробовал миллион вещей, но ничего не получалось. Можете ли вы помочь мне?

Ответы [ 2 ]

1 голос
/ 12 мая 2010

вы используете 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>

<? } ?>
0 голосов
/ 12 мая 2010

в конце вашего вызова ajax вам нужно переназначить вызов selectbox (). Проблема, с которой вы столкнулись, состоит в том, что элементы DOM, которые вы настраиваете при загрузке страницы, исчезают к концу вашего вызова ajax и заменяются новым полем выбора. Если вы используете методы $ .ajax или $ .get в jQuery, они дают вам возможность обратного вызова завершения. Я бы использовал это. 

$(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(); }});
    })
})

Редактировать: Это работает.

...