Question

对不起，我英语不好。我无法从依赖于jQuery的下拉菜单中选择选项值。我有三个下拉菜单，第一个类别，第二个是子类别，第三个是子子类别。在输入和更新模式下，默认情况下始终禁用第二和第三菜单。我可以在用户已选择但无法在子类别和子子类别菜单中进行选择的类别下拉框中进行选择。以下是我的完整代码：

[控制器]

public function productEditAction($id)
{
    $product = Products::findFirstByid($id);

    $this->view->id = $product->id;
    $this->view->setVar('pcid', $product->category_id);
    $this->view->setVar('pscid', $product->subcategory_id);
    $this->view->setVar('psscid', $product->sscid);

    $category = Categories::find();
    $this->view->setVar('categories',$category);
    $this->view->pick("index/entry");

}

public function getSubcategoryAction()
{ 
    $this->view->disable();
    $id = $this->request->getPost('id');
    $data = Subcat::findBycategory_id($id); 
    $resData = array();    
    foreach($data as $result)
    {
        $resData[] = array('id' => $result->id, 'category_id' => $result->category_id, 'subcategory' => $result->subcategory_name);
    }
    echo(json_encode($resData));       
}
public function getsscAction()
{ 
    $this->view->disable();
    $id = $this->request->getPost('id');
    $data = Ssc::findBysubcatid($id);  
    $resData = array();    
    foreach($data as $result)
    {
        $resData[] = array('id' => $result->id, 'subcatid' => $result->subcatid, 'ssctitle' => $result->ssctitle);
    }
    echo(json_encode($resData));       
}

[jQuery]

//Dependent List Category Action
$("select[name='category']").on("change", function(e){
    e.preventDefault();
    var value = $(this).val();
    if(value === '0'){$("select[name='subcategory']").attr("disabled", true); $("select[name='ssc']").attr("disabled", true);}else{$("select[name='subcategory']").attr("disabled", false);} 
    $.ajax({
        type: "POST",
        url: "http://localhost/shopping/backend/index/getSubcategory",
        data:'id='+value,       
    }).done(function(response){
        $("#subcategory").find('option').not(":first").remove();    
        $("#ssc").find('option').not(":first").remove();
        response = JSON.parse(response);
        response.forEach(function(value){
            $('#subcategory').append('<option value="'+value.id+'">'+value.subcategory+'</option>');
        });
    }).fail(function(){
            console.log('error: Please reload page and try again!');
    }).always(function(){
            console.log('Complete:');
    });
});
//Dependent List Sub-Category Action
$("select[name='subcategory']").on('change', function(e){
    e.preventDefault();
    var value = $(this).val();
    if(value === '0'){$("select[name='ssc']").attr("disabled", true);}else{$("select[name='ssc']").attr("disabled", false);}    
    $.ajax({
        type: "POST",
        url: "http://localhost/shopping/backend/index/getssc",
        data:'id='+value,       
    }).done(function(response){     
            $("#ssc").find('option').not(":first").remove();
            response = JSON.parse(response);
            response.forEach(function(value){               
                $('#ssc').append('<option value="'+value.id+'">'+value.ssctitle+'</option>');
            });
    }).fail(function(){
            console.log('error: Please reload page and try again!');
    }).always(function(){
            console.log('Complete:');
    });
});

[表格]

Category: 
<select name="category">
    <option value="0">Choose Category ...</option>
    {% for category in categories %}
        <option value="{{category.id}}" {% if category.id === pcid %}selected="selected"{% endif %}>{{category.categoryname}}</option>
    {% endfor %}
</select><br/>
sub-Category:<select name="subcategory" id="subcategory" disabled="disabled"><option value="0">Choose Sub-Category ...</option></select><br/>
Sub-Sub-Category:<select name="ssc" id="ssc" disabled="disabled"><option value="0">Choose Sub-Sub-Category ...</option></select><br/>

Answer 1

没什么特别的！

在控制器中添加以下行：

$subcategory = Subcat::findBycategory_id($product->category_id);
$this->view->setVar('subcategories',$subcategory);  

$Sscat = Ssc::findBysubcatid($product->subcategory_id);
$this->view->setVar('ssc',$Sscat);

并以您的形式：

sub-Category:
<select name="subcategory" id="subcategory" disabled="disabled">
    <option value="0">Choose Category ...</option>
    {% for subcategory in subcategories %}
        <option value="{{subcategory.id}}" {% if subcategory.id === pscid %}selected="selected"{% endif %}>{{subcategory.subcategory_name}}</option>
    {% endfor %}
</select><br/>
Sub-Sub-Category:
<select name="ssc" id="ssc" disabled="disabled">
    <option value="0">Choose Category ...</option>
    {% for Sscat in ssc %}
        <option value="{{Sscat.id}}" {% if Sscat.id === psscid %}selected="selected"{% endif %}>{{Sscat.ssctitle}}</option>
    {% endfor %}
</select><br/>

jQuery依赖下拉菜单选择

1 个答案: