Question

注意：我使用codeigniter框架

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

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

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

这是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

Answer 1

试试这个，

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

Answer 2

您是否使用此代码创建ddl_search下拉列表？

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

请注意，您的id =“ddl_search”应该是第4个参数，而不是第3个参数。然后只有你的下拉列表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();    
}

Answer 3

尝试这样，我编写并测试了脚本，它的工作原理。在您的选择中，您添加一个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>

它没有完全完成，但你得到了要点。

jquery隐藏和显示方法不起作用

3 个答案: