Jquery依赖下拉菜单选择

标签 jquery mysql drop-down-menu phalcon

抱歉我的英语不好。我无法从 jquery 相关下拉菜单中选择选项值。我有三个下拉菜单,第一个类别,第二个是子类别,第三个是子子类别。默认情况下,在输入和更新模式下,第二和第三菜单始终处于禁用状态。我可以在用户已选择的类别保管箱中进行选择,但无法在子类别和子子类别菜单中进行选择。下面是我的完整代码:

enter image description here

[ Controller ]

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

最佳答案

没有什么特别的事你必须做!!

在 Controller 中添加以下行:

$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依赖下拉菜单选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53399888/

相关文章:

javascript - 将图像 url 动态附加到 owl carousel 2

javascript - ASP.Net 中下拉框的数据绑定(bind)

html - 下拉列表对齐问题 (HTML/CSS)

javascript - 如何添加 jQuery scrollTop 偏移量?

jquery - 下拉菜单延迟不起作用

javascript - Ajax:为什么当我删除它的脚本时ajax仍继续运行

mysql - 如何从命令行更改 MySQL 提示符

php - 数据表在 codeigniter 中不起作用

mysql - 获取日期时间的日期和时间(MySQL 中的错误?)

javascript - 基于键为 : [array of dropdown options] pairs? 的对象创建一系列下拉菜单