Как установить значение опции выбора

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

Должно быть что-то вроде этого. Вам нужно будет использовать лучший селектор для получения вашего тега < select>.

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

EDIT После дальнейшего обсуждения этого выглядит как лучший ответ:

$(\".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); 

      }); 
      } 

     }); 
}); 

Это то, что спотыкаются много людей. Вот хорошее быстрое ознакомление с «этой» областью, которая должна сделать это понятнее. 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

Похоже, вы хотите создать каскадные выпадающие меню. Пользователь должен сначала выбрать категорию, имя учетной записи и т. Д. Я прав?

Если это то, что вы хотите. Ваш код не подходит, если у этих каскадных dropdownmenus не будет только одного варианта.

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

}); 

С помощью этого кода, опции не складывают на отборной элемент , потому что цель selecbox постоянно меняется в течение всего каждого цикла. Я подозреваю, что есть еще на 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); 
       } 

      }); 
     } 

    }); 

FYI

Я не знаю, какие данные вы пытаетесь ввести в каждый отборных коробки и какие данные вы на самом деле есть, но дело в том, что ваш текущий код не может накапливать параметры в одном окне выбора.

Я просто предложил способ достижения цели. Если вы предоставите мне точный набор данных, я имею в виду варианты, я могу помочь вам более точно. Наверное, этого вам достаточно, кстати.