Question

I am using javascript to get the selected option from one drop down and then put that information into another drop down. The code work fine in Safari, Chrome and Firefox but fails in IE. Can someone help me make the code cross browser compatible?

    function showTeams(weekNum) {
    var selectedItem = document.getElementById('pick'+weekNum);
    var a = document.getElementById('week'+weekNum).selectedIndex;
    if (a != 0) {
        var str = document.getElementById('week'+weekNum).value;
        var away = str.match(/^(.*)(?= at)/);
        var home = str.match(/at(.*)/);
        selectedItem.options[0].text = away[0];
        selectedItem.options[0].value = away[0];
        selectedItem.options[1].text = home[1];
        selectedItem.options[1].value = home[1];

        document.getElementById('week'+weekNum).style.visibility = "none";
        selectedItem.style.visibility = "visible";
        selectedItem.selectedIndex = 0;
    }
}

It fails in IE at var str = document.getElementById('week'+weekNum).value;, str returns as blank which breaks the regex and everything below it. Any insights and help would be greatly appreciated.

Edit: Adding relevant HTML.

<form class="pick" name="picks" action="./resources/send_picks.php" method="post">
    <p>Week 1: <select class="week" name="week1" id="week1" onchange="javascript:showTeams('1');">
        <option></option>
        <option>Dallas Cowboys at N.Y. Giants</option>
        <option>Indianapolis Colts at Chicago Bears</option>
        <option>New England Patriots at Tennessee Titans</option>
        <option>Buffalo Bills at N.Y. Jets</option>
        <option>Washington Redskins at New Orleans Saints</option>
        <option>Jacksonville Jaguars at Minnesota Vikings</option>
        <option>Atlanta Falcons at Kansas City Chiefs</option>
        <option>Philadelphia Eagles at Cleveland Browns</option>
        <option>St. Louis Rams at Detroit Lions</option>
        <option>Miami Dolphins at Houston Texans</option>
        <option>San Francisco 49ers at Green Bay Packers</option>
        <option>Seattle Seahawks at Arizona Cardinals</option>
        <option>Carolina Panthers at Tampa Bay Buccaneers</option>
        <option>Pittsburgh Steelers at Denver Broncos</option>
        <option>Cincinnati Bengals at Baltimore Ravens</option>
        <option>San Diego Chargers at Oakland Raiders</option>
    </select>
    <select class="pick" name="pick1" id="pick1" style="visibility:hidden" onchange="javascript:cancel('1')">
        <option></option>
        <option></option>
        <option>Cancel</option>
    </select>

Testing is being done on IE8 currently.

Answer 1

Based on the other questions having problems with .value and .checked, it is the best to use jQuery.

var str = $('#week'+weekNum).val();

You will save a lot of time if you switch to jQuery. Don’t worry about the quirks of IE anymore (or not so much anymore).