jquery toggle for different browsers

Question

I'm trying to get the following jquery toggle to work on IE, FF, and as many browsers as possible, but currently it works only on FF. Here, I've got the toggle available (between drop-down select and textarea) only when a certain option is selected ("bbb" in this case). Also, is there a better way to write the same script (a cleaner way, may be)?. Click here to check out what I've got right now.
Many thanks in advance.

$(document).ready(function() {
    $("#link a").hide();
    if ($("#sel").val() == 'bbb') $("#link a").show();
    $("#sel_id").change(function() {
        if ($("#sel").val() == 'bbb') {
            $("#link a").show();
        } else {
            $("#link a").hide();
            $("#link").show();
        }
    });

    $('#txtbox').hide();
    $('#link a').click(function() {
        $('#txtbox').slideToggle();
        $(this).text($(this).text() == "(Another input option)" ? "(Method 1)" : "(Another input option)");
        $('#sel_id').show();
        if ($('#link a').text() == '(Method 1)') {
            $(this).prev('div').hide();
            $('#link').prev().remove('div');
            $('#link').before("<div>This is another input option</div>");
            $('#sel_id').hide();
            $('#cp').val('');
            $('#sel').val('');
        } else {
            $('#link').prev().remove('div');
            $('#link').before("<div>Method 1</div>");
        }
        $("#len").val('None');
        return false;
    });
});



  <div id="link">
       <div>Method 1</div><a href="#">(Another input option)</a>
   </div>
   <div id="sel_id">
       <select id="sel" name="sel">
            <option value="None" selected></option>
            <option value="aaa">aaa</option>
            <option value="bbb">bbb</option>
        </select>
   </div>

   <div id="txtbox">
       <div style="margin-top: 5px;" class="tab">copy and paste:<br />
            <textarea rows="5" cols="64" id="cp" name="cp"></textarea>
        </div>
    </div> 

Answer 1

I think you could clean it up by using a little more HTML and then just using the JS to hide/show the desired bits.

<div id="select">
   <div class="label">Method 1<a href="#">(change me)</a></div>
   <select id="sel" name="sel">
     <option value="None" selected></option>
     <option value="aaa">aaa</option>
     <option value="bbb">bbb</option>
   </select>
</div>
<div id="textbox">
   <div class="label">Method 2<a href="#">(change back)</a></div>
   <div style="margin-top: 5px;" class="tab">copy and paste:</div>
   <textarea rows="5" cols="64" id="cp" name="cp"></textarea>
</div> 

Then for the javascript:

$(function() {
   $("#select a, #textbox").hide();
   $("#sel").change(function() {
      if ($("#sel").val() == 'bbb') {
         $("#select a").show();
      } else {
         $("#select a").hide();
      }
   });
   $(".label a").click( function(e) {
      e.preventDefault();
      $("#select, #textbox").slideToggle();
   });
});

While working this up, I noticed a couple things that might cause other browsers to choke.

1) $("#len").val('None');
There's no element with that id.

2) $("#sel_id").change
This should probably be "#sel" (the select control) instead of "#sel_id" (the div) - some browsers may not recognize the "change" event on a div.

Answer 2

$("#sel_id").change(function() {

Surely #sel? #sel_id is the div, which doesn't change. In IE, the change event doesn't ‘bubble’ so you can't catch it on ancestor elements.

Answer 3

Update your JS to this and it will work in IE, Chrome and FireFox. I could probably make the code smaller, but I'm only on coffee break. Also, don't forget to minify and or obfuscate once it's all good.

$(document).ready(function () {
    // Maybe give these better variable names.
    var anotherOptionText = "(Another input option)";
    var methodOneText = "(Method 1)";
    var bbbText = "bbb";
    var anchors = $("#link a");
    var picklist = $("#sel");
    var picklistContainer = $("#sel_id");
    var links = $("#link");
    var someTextBox = $('#txtbox');
    var cp = $('#cp');
    var len = $("#len");


    anchors.hide();

    if (picklist.val() === bbbText) {
        anchors.show();
    }

    picklist.change(function () {
        if ($(this).val() === bbbText) {
            anchors.show();
        } else {
            anchors.hide();
            links.show();
        }
    });

    someTextBox.hide();

    anchors.click(function () {
        someTextBox.slideToggle();
        $(this).text($(this).text() === anotherOptionText ? methodOneText : anotherOptionText);
        picklistContainer.show();

        if (anchors.text() === methodOneText) {
            $(this).prev('div').hide();

            links.prev().remove('div');
            links.before("<div>This is another input option</div>");

            picklistContainer.hide();

            cp.val('');
            picklist.val('');
        } else {
            links.prev().remove('div');
            links.before("<div>Method 1</div>");
        }

        len.val('None');

        return false;
    });
});