When a [name="tip"] has the first value, display a specific element, otherwise it would display another element.

Both elements have the display:none property. When I load the page I check the select value and fadeIn the desired element automatically.

Everything works fine except when I try to change the selected option: nothing happens. I added both javascript onchange to that item and jquery .change() and nothing happens. Can you tell me why it does not work in my example?

<form id="fm-account-properties-tab" method="POST">
<table width="300px" style="margin-top:10px;" align="center" >

    <tr>
        
        <td align="left">
        <select class="easyui-bobox" name="tip" style="width:200px;" class="easyui-validatebox" required="true" onchange="changeType();">
                    <option value="l1">l1</option>
                    <option value="l2">l2</option>
                    <script>
                        $(document).ready(function(){
                            $('[name="tip"]').val('<?php echo $a['tip'];?>');
                        });
                    </script>
        </select>
        </td>
    </tr>
    <tr id="l1" style="display:none">

        <td align="left">
        <select class="easyui-bobox" name="l1"  style="width:200px;" class="easyui-validatebox" required="true">
                    
        </select>
        </td>
    </tr>
    <tr id="l2" style="display:none">

        <td align="left">
        <select class="easyui-bobox" name="l2"  style="width:200px;" class="easyui-validatebox">
                    
                    
        </select>
        </td>
    </tr>
</table>
</form>

<script>
function changeType()
{

if($('[name="tip"]').val()=='l1')
    {
    $('#l1').fadeIn();
    $('#l2').hide();
    }
else
    {
    $('#l2').fadeIn();
    $('#l1').hide();
    }
}



$(document).ready( function () {
        
        changeType();

            $('[name="tip"]').change(function(){ alert('1');});//it never alerts me
    });

When a [name="tip"] has the first value, display a specific element, otherwise it would display another element.

Both elements have the display:none property. When I load the page I check the select value and fadeIn the desired element automatically.

Everything works fine except when I try to change the selected option: nothing happens. I added both javascript onchange to that item and jquery .change() and nothing happens. Can you tell me why it does not work in my example?

<form id="fm-account-properties-tab" method="POST">
<table width="300px" style="margin-top:10px;" align="center" >

    <tr>
        
        <td align="left">
        <select class="easyui-bobox" name="tip" style="width:200px;" class="easyui-validatebox" required="true" onchange="changeType();">
                    <option value="l1">l1</option>
                    <option value="l2">l2</option>
                    <script>
                        $(document).ready(function(){
                            $('[name="tip"]').val('<?php echo $a['tip'];?>');
                        });
                    </script>
        </select>
        </td>
    </tr>
    <tr id="l1" style="display:none">

        <td align="left">
        <select class="easyui-bobox" name="l1"  style="width:200px;" class="easyui-validatebox" required="true">
                    
        </select>
        </td>
    </tr>
    <tr id="l2" style="display:none">

        <td align="left">
        <select class="easyui-bobox" name="l2"  style="width:200px;" class="easyui-validatebox">
                    
                    
        </select>
        </td>
    </tr>
</table>
</form>

<script>
function changeType()
{

if($('[name="tip"]').val()=='l1')
    {
    $('#l1').fadeIn();
    $('#l2').hide();
    }
else
    {
    $('#l2').fadeIn();
    $('#l1').hide();
    }
}



$(document).ready( function () {
        
        changeType();

            $('[name="tip"]').change(function(){ alert('1');});//it never alerts me
    });

• javascript
• jquery

• How did you declare your DOCTYPE ? Even though it's not directly related to your issue, id attributes beginning by numbers are not valid in HTML4. They are in HTML5 though. – Jeff Noel Commented Jul 3, 2013 at 12:17
• How many elements are there with a name of tip? There are far too many questions raised by this question... – BenM Commented Jul 3, 2013 at 12:21
• its not about id. i posted here numeric id , tho they are strings – Radu Vlad Commented Jul 3, 2013 at 12:22
• one element with name tip...the main select – Radu Vlad Commented Jul 3, 2013 at 12:22
• Just a small ment: why do you end your id's with underscores? I know it is allowed: stackoverflow./questions/70579/… but why do you do that? – JP Hellemons Commented Jul 3, 2013 at 12:36

3 Answers 3

use .on for newer jQuery versions (jQuery > 1.7.x reference)

function changeType() {
    if ($('[name="tip"]').val() == '___') {
        $('#1').fadeIn();
        $('#2').hide();
    } else {
        $('#2').fadeIn();
        $('#1').hide();
    }
}

$(document).ready(function () {
    changeType();
    $('select[name="tip"]').on('change', function() {
        changeType();
    });
});

you have a double class attribute on your select.

here is a working sample http://jsfiddle/tvhKH/

May be you should use js error event to figure out the error in that code. E.g, <script> try {....all your codes here...} catch(err) {alert("THE ERRor" + err.message);} </script>. These code will alert your error and the exact point it occurs. Good luck!

First, you should try to add a

console.log("It works");

or a

alert("It works")

in your method so you know if it is actualy called.

Then I think the issue may e from FadeIn() only works on elements with css {display: none} and visibility different of 'hidden', so are you sure your elements are ? In doubt, you may replace

.fadeIn();

by

.css('visibility','visible').hide().fadeIn(); // hide() does the same as display: none

Then please let me know if you have more information after doing that.