jquery依赖下拉菜单选择

Posted 2023-02-24

【中文标题】jquery依赖下拉菜单选择

【英文标题】：Jquery dependent drop-down menu select

【发布时间】：2019-04-23 07:17:17

【问题描述】：

对不起，我的英语很差。我无法从 jquery 相关的下拉菜单中选择选项值。我有三个下拉菜单第一个类别，第二个是子类别，第三个是子子类别。在进入和更新模式下，默认情况下，第 2 和第 3 菜单始终处于禁用状态。我可以在用户已经选择但无法在子类别和子子类别菜单中选择的类别下拉框中进行选择。下面是我的完整代码：

[控制器]

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

【参考方案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/>