如何设置选择选项的值

Question

我正在尝试根据第一个菜单的选择来填充下拉菜单。使用下面的代码只会使下一个下拉列表为空

  $(\".category_id\").change(function(){

    $(\"#account_id > option\").remove();
    $(\"#item_name_id > option\").remove();

    var  category_id={'category_id':$(this).val()};

 $.ajax({
       type: \"POST\",
       url: 'getCategory1/', 
       dataType: \"json\",
       data: category_id,
       success: function(category_ids){ 

 // category_ids = {"0":"Choose Account Name","2":"OfficeEquipment","3":"IT Equipment"}
               $.each(category_ids,function(account_id,name){

                  var opt = $('<option />');           
                  opt.val(account_id);
                  opt.text(name);

                  $(this).closest('td').next().find('select').append(opt);

             });
          }

      });
});

我使用的控制器功能：

  public function actionGetCategory1(){
        //Get all the sub categories a the main category
        $cat_id = $_POST['category_id'];
        $subCategory = Item::model()->getCategory1($cat_id); 
        echo(json_encode($subCategory));
    }

模型函数

public function getCategory1($cat_id){
        $where  = "WHERE category_id = $cat_id";
        $select = "SELECT * FROM tbl_account $where";
        $query  =  Yii::app()->db->createCommand($select)->queryAll();

        $subCat = array();
        $subCat[0] = "Choose Account Name";
           if($query){
              foreach($query as $row){
                $subCat[$row['account_id']] = $row['account_name'];
              }
              return $subCat;
            }
            else{ return FALSE; }
    }

$.each 中要循环的数据将以 json 格式来自控制器。我使用 var_dump 来显示 i。

string(189) "{"0":"Choose Account Name","2":"Information and Communication Technology Equipment","3":"Office Equipment","4":"Furniture and Fixtures","5":"Communication Equipment","6":"Other Equipments"}"

Answer 1

应该是这样的。您将需要使用更好的选择器来获取您的 标签。

$.each(category_ids,function(account_id,name){
    var x = document.createElement('option');
    x.setAttribute('value', account_id);
    var y = document.createTextNode(name);
    $(x).append(y);

    $('#selectId').append(x)
});

编辑 经过进一步讨论，这看起来是一个更好的答案：

$(\".category_id\").change(function(){
    var _this = this;
    $(\"#account_id > option\").remove();
    $(\"#item_name_id > option\").remove();

    var  category_id={'category_id':$(this).val()};

 $.ajax({
       type: \"POST\",
       url: 'getCategory1/', 
       dataType: \"json\",
       data: category_id,
       success: function(category_ids){ 

 // category_ids = {"0":"Choose Account Name","2":"OfficeEquipment","3":"IT Equipment"}
               $.each(category_ids,function(account_id,name){

                  var opt = $('<option />');           
                  opt.val(account_id);
                  opt.text(name);

                  $(_this).closest('td').next().find('select').append(opt);

             });
          }

      });
});

这是让很多人绊倒的事情。这是关于“this”范围的一个很好的快速阅读，应该可以更清楚地理解这一点。http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/

Answer 2

试试这样的，

    $.each(category_ids,function(account_id,name){
      var opt = $('<option />');           
      opt.val(account_id);
      opt.text(name);
      $(this).closest('td').next().find('select').append(opt);
    });
    $(this).closest('td').next().find('select option:first').attr('selected', 'selected');

Answer 3

您似乎想要构建级联下拉菜单。用户必须先选择类别，然后再选择帐户名称，等等……我说的对吗？

如果那是你想要的。除非那些级联下拉菜单每个只有一个选项，否则您的代码是不正确的。

$.ajax({
   type: \"POST\",
   url: 'getCategory1/', 
   dataType: \"json\",
   data: category_id,
   success: function(category_ids){ 
       // assume that your category_ids will be a string array.
       // ex: ["#cate01", "#cate02", "#cate03", "#cate04", "#cate05"]  

       $.each(category_ids, function(account_id,name) {
           // first loop,
           //   be account_id = 0, name = "#cate01"

           var opt = $('<option />');           
           opt.val(account_id);
           opt.text(name);

           // <option value="0">#cate01</option> is created.

           // this will be "#cate01", it is the same with the name value.
           // actually, you don't need to use this keyword here.
           $(this).closest('td').next().find('select').append(opt);

           // it will look up #cate01 and find its parent, its td and
           // moves to td right next to it, and finally settles on the select element inside it.
       });
   }

});

使用此代码，选项不会叠加在选择元素上因为目标选择框在整个每个循环期间都在不断变化。我怀疑category_ids 上还有更多内容。但即使 `category_ids 包含的不仅仅是一个字符串数组，也不是这样做的方法。我不确定继续我的回答，因为您似乎足够聪明，已经知道如何调整这种代码。

无论如何..

$.ajax({
       type: \"POST\",
       url: 'getCategory1/', 
       dataType: \"json\",
       data: category_id,
       success: function(category_ids){ 

           $.each(category_ids, function(account_id,name) {

               // you need a list of option data here, 
               // fetching it though AJAX or something ( it's your call )

               // Let's say you get a set of option data like this at this point.
               /* 
                    optData : { 
                       cate01 : ["option01", "option02", "option03" ··· , "option10" ]
                    }
               */

               // I'm declaring this variable for improving readability.
               var targetDropdown = $(name).closest('td').next().find('select');
               $.each(optData.cate01, function(val, optionName) {
                   var opt = $('<option />');           
                   opt.val(val);
                   opt.text(optionName).appendTo(targetDropdown);
               }

           });
       }

    });

仅供参考

我不知道您要在每个选择框中输入什么样的数据以及您实际拥有什么样的数据，但关键是您当前的代码无法堆积选项单个选择框。

我只是建议了实现目标的方法。如果您向我提供确切的数据集，我的意思是选项，我可以更准确地帮助您。顺便说一句，我想这对你来说已经足够了。