從以前的選擇mysql的jquery下拉

編輯2看起來這是一個CSS類的問題。從以前的選擇mysql的jquery下拉

編輯奇怪的是，它在網站的公共一邊工作，而不是私人。它必須是一個CSS或與另一個插件衝突。

讓我開始說我有很少的jQuery體驗，這是我第一次涉及ajax。

我想要做的是動態填充下拉數據基於前面的下拉選擇。

我有HTML，看起來像這樣

 <label for="employee_type">Employee Type</label> 
     <select name="employee_type" id="employee_type"> 
       <option value="1" selected="selected">Team Member</option> 
       <option value="2">Supervisor</option> 
       <option value="3">Manager</option> 
      </select>   

     <label for="manager">Reports To</label> 
     <select name="manager" id="manager_name"> 
        <option value="0" selected="selected">Please Select Employee Role</option> 
      </select>

的想法是在選擇僱員的角色或類型的字段下與所有誰在食物鏈越往上經理來填入。

我有PHP是outputing使用json_encode的輸出是

[{"id":"2","first_name":"John","last_name":"Doe"}]

這是basicly只是所有用戶的數組，並在中顯示他們的姓名和身份證的一些JSON寫的MYSQL選擇字符串陣列。

這裏是棘手的部分，ajax。我發現this tutorial我修改了

// attach a change handler to the form 
    $("select#employee_type").change(function(){ 
    //get the mininimum employee level 
    var input = $("select#employee_type").val(); 
    //get the callback url 
    var ajax_url = "/admin/employee/get_json/"+input; 

    $.ajax({ 
     url:ajax_url, 
     data:{ url:escape(ajax_url) }, 
     dataType:"json", 
     success:function(data){ 
       var select = $('#manager_name'); 
     var options = select.attr('options'); 
       $('option', select).remove(); 

     $.each(data, function(index, array) { 
       options[options.length] = new Option(array['first_name']+ " "+array['last_name'],array['id']); 
     }) 
       }, 

      error:function(xhr,err,e){ alert("Error: " + err); } 
    }); // $.ajax() 
    return false; 
    }); // .submit()*/

這項工作大約有78％的方法。它增加了正確的選項和價值。它失敗的地方是，如果我有$('option', select).remove();（爲了確保字段每次改變時都不會添加這些值），我試圖點擊該字段時會刪除該字段。我也認爲刪除選定的選項（請選擇...）會很好。

任何幫助，這將是偉大的！

來源

2011-03-04 BandonRandon

我建議使用.empty（）而不是.remove（），這樣你實際上只刪除那個元素的子元素而不是元素本身。

success:function(data){ 
    var select = $('#manager_name'); 
     select.empty(); 

     $.each(data, function(index, array) { 
       select.append(new Option(array['first_name']+ " "+array['last_name'],array['id'])); 
     }) 
},

我個人還沒有使用新的選項方法，所以我無法驗證它是正確的。

一個可行的解決方案應該是http://jsfiddle.net/HffLg/10/

來源

2011-03-04 08:36:28 Peeter

這主要是工作，我有一個問題，現在在哪裏，我不能夠選擇的第一個結果。不知道這是否與你的代碼或其他東西有關。 – BandonRandon 2011-03-04 08:53:23

你能否再描述一下你的問題/錯誤？ – Peeter 2011-03-04 08:57:24

看來，當我更改'＃employee_type'的值時，我無法選擇#manger_name的值，特別是如果只有一個值。我無法點擊第一個值。我試圖找出是否是CSS問題，但我很確定它是JavaScript相關的。 – BandonRandon 2011-03-04 09:00:36

從以前的選擇mysql的jquery下拉

回答

相關問題