从MySQL基于previous选择jQuery的下拉菜单 [英] jquery dropdown from mysql based on previous selection

问题描述

编辑2 好象这是一个问题，一个CSS类。

EDIT 2 Seemed it was a problem with a CSS class.

修改自叹不如它通过不priviate作品在网站上的公共端。它必须是一个CSS或冲突的另一个插件。

EDIT Strange enough it works on the public side of the site by not the priviate. It must be a css or conflict with another plugin.

让我先出去说我很少jQuery的经验，这是我第一次与阿贾克斯涉足。

Let me start out by saying I have very little jQuery experience and this is my first time dabbling with ajax.

我所试图做的是动态填充的基础上的previous的选择下拉数据降下来了。

What I am trying to do is dynamically populate drop-down data based on the selection of the previous drop down.

我有HTML，看起来像这样

I have html that looks like this

        <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>                 

这个想法是，当员工的角色或类型中选择的字段下面的所有谁是高了食物链。

The Idea being that when an employee role or type is selected that the field below populates with all the managers who are higher up on the food chain.

我写的PHP是用一些允许输出一个JSON MYSQL选择字符串 json_en code 的输出是否

I have a MYSQL select string written with php that is outputing some json using json_encode the output of that is

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

这是basicly所有用户和他们的名字和身份证的只是一个数组的数组中所显示。

This is basicly just an array of all users and their names and id's to be shown in the array.

下面到了棘手的部分，阿贾克斯。我发现我已经修改了这个教程

Here comes the tricky part, the ajax. I found this tutorial which I've modified

    // 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％的样子。它增加了正确的选择和价值。当它失败的是，如果我有 $（选项，选择）上卸下摆臂（）; （这是nessarry以确保vaules没有得到每次加现场的变化），当我尝试点击它的领域被删除。我也认为这将是一个很好的接触，以删除所选的选项（请选择...）。

This works about 78% of the way. It adds the correct options and value. Where it fails is that if I have $('option', select).remove(); (which is nessarry to make sure the vaules don't get added each time the field changes) The field gets removed when I try to click on it. I also think it would be a nice touch to remove the selected option (Please Select...).

任何帮助将是巨大的！

推荐答案

我建议使用.empty（）。

I'd suggest using .empty() instead of .remove() as that way you actually only delete the children of that element instead of the element itself.

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']));
        })
},

我个人没有使用过的新选项的方法，所以我不能确认它是正确的。

I personally haven't used the new Option method, so I can't verify that it's correct.

一个有效的解决方案应该是 http://jsfiddle.net/HffLg/10/

A working solution should be http://jsfiddle.net/HffLg/10/

这篇关于从MySQL基于previous选择jQuery的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！