根据上一个下拉列表中的代码点击器显示第二个下拉列表 [英] Show a second dropdown based on previous dropdown .in Code igniter

问题描述

我有两个下拉框，实际上我已经做了这个功能通过使用jquery和ajax通过调用id，如果我选择一个东西，它会出现在第二个选择框，但我面临的主要问题是，我使用模板，其中选择框使用一些称为cho的类名，如果我不使用这个类显然我的选择框看起来有线，所以我喜欢它的样式。如果我在第二个选择框中使用这个类，结果显示然后功能不工作，但如果我不使用类，那么它会工作，所以我想要的是：
我想使用css类和实现功能，我检查每个css文件，但我不能找到cho类所以我认为，如果我无法更改css文件可能有在jquery的方式，我会解决这个问题。

这是我的第一个选择框，其中选择框和css工作正常。

 <？php echo form_dropdown（'cat_id'，$ records2，'＃'，'id =categoryclass = cho'）;？> 
  

第二个选择框-without css ..functionality successfull

 <？php echo form_dropdown（'item_id'，$ records3，'＃'，'id =items'）; > 
  

使用css - 功能无法工作，但css执行：

 <？php echo form_dropdown（'item_id'，$ records3，'＃'，'id =itemsclass =cho'）; > 
  

我的javascript：

 < script type =text / javascript> //<！[CDATA [
 $（document）.ready（function（）{
 $ '）.change（function（）{
 $（＃items> option）。remove（）; 
 var category_id = $（'＃category'）。val（）; 
 $ .ajax（{
 type：POST，
 url：stockInController / get_Items /+ category_id，
 
 success：function（items）
 { 
 $ .each（items，function（item_id，item_name）
 {
 var opt = $（'< option />'）; 
 opt.val（item_id） ; 
 opt.text（item_name）; 
 $（'＃items'）。append（opt）; 
}）; 
} 
}）; 
}）; 
}）; 
< / script> 
  

两个下拉菜单的html文件源

 < div class =controls> 
< select name =cat_idid =categoryclass =cho> 
< option value =1>牛仔裤< / option> 
< option value =2> shirts< / option> 
< / select> 
< br /> 
< / div> 
< / div> 
  

项目：
$ b b
sdf
bello
gamer
dsf
blue

解决方案

确定尝试通过名称选择：

 < script type =text / javascript> //<！[CDATA [
 $（document）.ready（function（）{
 $（'＃category'）。change 
 $（'select [id =items_chzn]> option'）remove（）; 
 var category_id = $（'＃category'）。val（）; 
 $。 ajax（{
 type：POST，
 url：stockInController / get_Items /+ category_id，
 
 success：function（items）
 {
 $ .each（items，function（item_id，item_name）
 {
 var opt = $（'< option />'）; 
 opt.val（item_id）; 
 opt.text（item_name）; 
 $（'select [id =items_chzn]'）。append（opt）; 
}）; 
} 
 
}）; 
 
}）; 
}）; 
 
 
 
 
< / script> 
  

如果您仍然遇到问题，请尝试在ajax调用后的函数中使用警报。 p>

I have two dropdown boxes, actually I have done this functionality by using jquery and ajax by calling an id that if I select one thing it will appear on second select box but the main problem I am facing is that I am using a template where a select box uses some class name called "cho" as if I don't use this class obviously my select box look wired so I like the style of it .So if I use this class in my second select box where the result display then the functionality wont work but if I don't use the class then it will work so what I want is: I want to use the css class and implement the functionality too I checked in every css file but I cant find cho class so what I think that if I cant change the css file may be there is the way in jquery that I'll resolve this issue.

This is my first select box ,where select box and css working fine.

<?php echo form_dropdown('cat_id', $records2, '#', 'id="category" class =  "cho"');?>

2nd select box -without css ..functionality successfull

   <?php echo form_dropdown('item_id', $records3, '#', 'id="items"'); ?>

With css--functionality wont work but css do:

   <?php echo form_dropdown('item_id', $records3, '#', 'id="items" class = "cho"'); ?>

My javascript:

<script type="text/javascript">// <![CDATA[
    $(document).ready(function(){       
        $('#category').change(function(){ 
            $("#items > option").remove(); 
            var category_id = $('#category').val();  
            $.ajax({
                type: "POST",
                url: "stockInController/get_Items/"+category_id, 

                success: function(items) 
                {
                    $.each(items,function(item_id,item_name) 
                    {
                        var opt = $('<option />'); 
                        opt.val(item_id);
                        opt.text(item_name);
                        $('#items').append(opt); 
                    });
                }                 
            });             
        });
     });        
 </script>

html file source of two dropdown

   <div class="controls">
 <select name="cat_id" id="category" class = "cho">
         <option value="1">jeans</option>
         <option value="2">shirts</option>
     </select>
     <br />
   </div>
</div>

Items: sdf bello gamer dsf blue

解决方案

OK try selecting through name:

   <script type="text/javascript">// <![CDATA[
$(document).ready(function(){       
    $('#category').change(function(){ 
        $('select[id="items_chzn"] > option').remove(); 
        var category_id = $('#category').val();  
        $.ajax({
            type: "POST",
            url: "stockInController/get_Items/"+category_id, 

            success: function(items) 
            {
                $.each(items,function(item_id,item_name) 
                {
                    var opt = $('<option />'); 
                    opt.val(item_id);
                    opt.text(item_name);
                    $('select[id="items_chzn"]').append(opt); 
                });
            }

        });

    });
 });




        </script> 

If you are still having an issue try using an alert in the function after the ajax call.

这篇关于根据上一个下拉列表中的代码点击器显示第二个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！