-3

注意：我使用codeigniter框架

编辑：我不知道它是否相关，但我想显示的元素（form_range_kelas）是p

我有一个dropdown可以控制其他 html 元素的可见性。我只有一点经验，jquery/javascript所以我在这个网站上搜索，我得到了这个小提琴

所以，我跟着那个小提琴，但它不工作..它只是不工作，我试图看到萤火虫，但似乎什么也没发生。

这是dropdown代码（使用 codeigniter's 库）：

        <p>
            Search By : <?php echo form_dropdown('ddl_search', $data_search, 'id="ddl_search"');?>
        </p>

这是我的脚本（来自jquery ui，它包含 jquery 对吗？）：

<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js"></script>

这是我html想改变它的可见性的元素：

 <p id="form_range_kelas">
            Kelas :
            <?php echo form_dropdown('ddl_kelas1', $list_kelas, 'id="ddl_kelas1"');?> -
            <?php echo form_dropdown('ddl_kelas2', $list_kelas, 'id="ddl_kelas2"');?>
        </p>

这是我的完整 javascript/jquery代码（注意：警报不起作用）：

 <script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });

    $('#ddl_search').change(function() {
        alert("a");
        if ($(this).val() == 'range_kelas')
            $('#form_range_kelas').show();
        else
            $('#form_range_kelas').hide();
    });
 </script>

这是我controller（codeigniter）中的数据：

$data['data_search'] = array('kelas' => 'Kelas',
                         'range_kelas' => 'Range Kelas', 
                         'nama' => 'Nama',
                         'alamat' => 'Alamat',
                         'bulan' => 'Bulan Lahir',
                         'range_bulan' => 'Range Bulan Lahir');

我该怎么办？

感谢：D

4

3 回答 3

1

试试这个，

$('#ddl_search').change(function() {
  if ($(this).val() == 'range_kelas'){
      $('#form_range_kelas').show();
  }
  else{
      $('#form_range_kelas').hide();
  }
});
于 2013-05-03T11:52:12.427 回答
1

您是否使用此代码创建 ddl_search 下拉菜单？

form_dropdown('ddl_search', $data_search, '', 'id="ddl_search"');

请注意，您的 id="ddl_search" 应该是第四个参数而不是第三个参数。然后，只有您的下拉列表 ddl_search 将使用正确的 ID 创建，并且您编写的代码将起作用。

还要在 "$(function() {}" 中编写更改函数

 $(function() {
        $( "#datepicker" ).datepicker();

       $('#ddl_search').change(function() {
        alert("a");
        if ($(this).val() == 'range_kelas')
            $('#form_range_kelas').show();
        else
            $('#form_range_kelas').hide();
       });
   });

替代解决方案

<?php echo form_dropdown('ddl_search', $data_search, '', 'id="ddl_search" onchange="myfunc();"');?>

并在 js 函数中使用代码

function myfunc() {         
        alert('here');
        if ($('#ddl_search').val() == 'range_kelas')
            $('#form_range_kelas').show();
        else
            $('#form_range_kelas').hide();    
}
于 2013-05-03T12:36:56.293 回答
0

像这样尝试，我编写并测试了脚本并且它有效。在您的选择中，您添加一个 onchange 值：

<select onchange="selectfunction()" id="formselect">
    <option value="range_kelas">yes</option>
    <option value="othervalue">no</option>
</select>

在文档顶部添加此脚本并进行相应更改

<script>
    function selectfunction(){
        var e = document.getElementById("formselect");
        var selectedindex = e.options[e.selectedIndex].value;
        if(selectedindex == "range_kelas"){
            document.getElementById('FORM_YOU_WANT_TO_HIDE').style.visibility = 'hidden'; 
        }
    }
</script>

它还没有完全完成，但你明白了要点。

于 2013-05-03T12:32:56.560 回答